web前端开发文字加粗 Web前端开发不能忽略的小问题

很多关注前端开发的朋友很希望了解web前端开发文字加粗 Web前端开发不能忽略的小问题，今天我爱编程网为大家整理了相关文章，一起来看看吧！

Web前端开发不能忽略的小问题

今天小编要跟大家分享的文章是关于Web前端开发不能忽略的小问题。现在，有越来越多所谓的“教程”来帮助我们提高网站的易用性。今天小编收集了一些在Web开发中容易出错和被忽略的小问题，并且提供了参考的解决方案，希望能够帮助Web开发者更好的完善网站。下面让我们一起来看一看吧！





通过避免下面这些小错误，可以使得我们的网站变得更加友好。


错误1：表单的label标签跟表单字段没有关联


利用“for”属性允许用户单击label也可以选中表单中的内容。这可以扩大复选框和单选框的点击区域，非常实用。


错误2：logo图片没有链接到主页


点击网站logo就能转到主页已经成为了网民的条件反射。此外，值得一提的是，logo是指定放于左上角的。


错误3：不能区分是否已经访问过该链接


访问过的连接状态应该与没有访问过的有所区别，以便于让用户直观地明白哪个链接已经点击过了。


错误4：没有突出当前选中激活的表单项


可以使用“focus”展现选中的文本区域处于动态中。也可以使用CSS样式，例如，突出的边框或者略有变化的背景色。


错误5：图片中没有alt图片描述信息


你可能会觉得无关紧要，但是这是必要的!请记住添加一个说明性的alt属性到你的图片上，除非这张图片很明显是用作装饰的，那么这个alt属性才可以为空(但仍然存在!)。如果是使用图片作为链接点，那么可以输入链接地址。


错误6：背景图片后面没有设置背景色


在内容文字后面使用背景图片是很普遍的，但是我们同时要考虑到如果背景图片被客户端所禁用的情况，所以最好背景图后面再设置一个相似色调的背景颜色，以免文本变得不可阅读。


错误7：不一致的界面设计


矫枉过正大概就是这个意思了。有些设计师为了提高网页水平，故而为网站中的每个网页都创建了不同的设计。但是这只会混淆用户，使他们不知所措。记住，无论一个网站有多么的优秀和有吸引力，如果它的整体外观和感觉并不一致，那么用户就很难记住它。建议如下：


1、每个页面使用标准一致的模板链接到网站的主要部分。


2、关键字要简单。设计应该美观简洁，这样用户在使用时才不会困惑。


错误8：下划线的内容并不是链接


众所周知，带有下划线的内容很容易被当成链接。不要随随便便地在文字中来一个下划线，这样会让人困惑。如果真的想强调某个单词，不妨试试加粗或者加大字体。


最后总结


通过识别这些常见的错误，web开发人员可以避免很多让其他人饱受煎熬的挫折。我们不仅需要承认错误，还应该清楚错误的影响，并采取措施避免错误，这样才能有更好的开发表现——并有信心完成任务!


以上就是小编今天为大家分享的关于Web前端开发不能忽略的小问题的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。想要了解更多web相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！

我爱编程网

如何理解 web 语义化

语义化的HTML结构怎么理解
关于html结构的面试题，语义化的html占据了很大一部分。那么为什么要使用语义化的HTML？语义化的HTML到底有什么好处呢？

HTML是提供网页文档内容的上下文结构和含义；html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以首先我们要知道html和页面的表现是没有关系的，这些是css的事情。HTML在页面中的作用就是结构和含义，通俗点说就是划分内容，这里放什么，我们放的是什么。
语义化的HTML结构首先要强调HTML结构
HTML结构是页面的骨架，一个页面就好像一幢房子，HTML结构就是钢精钢筋混泥土的墙，一幢房子如果没有钢精钢筋混泥土的墙那就是一堆费砖头，不能住人，不能办公。css是装饰材料，是原木地板，是大理石，是油漆，是用来装饰房子的，CSS的强大就不用多说了，css如果没有html结构那就是一堆木板，一同油漆，没有了实际使用价值。CSS完全依靠引用它的(X)HTML文档。如果你想使CSS的能力充分发挥到极致，提供一个用既干净又有结构的内容的html是非常必要的，“HTML是在互联网上发布超文本的通用语，HTML使用标签来对文本结构化”。
语义化的HTML结构怎么写？
HTML是一种对文本内容进行结构和意义（或者说“语义”）进行补充的方法。它会告诉我们说：“这行是一个标题，这几行组成了一个段落。这些文字是项目列表，这些文字是链接到互联网上另一个文件的超链接。”值得注意的是，不应该让HTML来告诉我们：“这些文字是蓝色的，这些文字又是红色的。这部分内容是最最靠右的一栏，这行内容是斜体字。”这些和表现相关的信息是CSS的工作。在做前端开发的时候要记住：HTML告诉我们一块内容是什么（或其意义），而不　　是它长的什么样子。当我们提到“语义标记”的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。
语义化的HTML结构其实很简单，首先掌握html中各个标签的语义，<div>是一个容器；<strong>是表示强调；<ul><li>是一个无序列表等等…在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

语义化的HTML结构到底有什么好处？
我们知道HTML5新增的标签，比如<header>和<footer>，html正在朝着更加健壮的语义化的HTML结构发展，xhtml2在这点上没html5先进，这也是xhtml2死亡的一个原因，这一点也说明语义化的HTML结构是html的发展趋势。

1.去掉或样式丢失的时候能让页面呈现清晰的结构：
html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.

3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.
语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.SEO主要还是靠你网站的内容和外部链接的。

6.便于团队开发和维护
W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至 实现模块化开发。
如有不同观点，补充，欢迎留言讨论。

php如何生成加粗或者斜体的文字样式图片

1. 加粗或者斜体的文字可以用php的函数控制.我想你是想生成验证码图片是吗?

2. 如果是想生成验证么图片有几个函数可以考虑

   imagecreate($length,$height)创建图片.参数是图片的宽度和高度

   imagecolorallocate($image,$r,$g,$b)设置背景色,r b g就是图片的三色rgb参数.这个可以由传入0-255的随机数决定随机的背景色.还可以生成字体色

   imagettftext($_image,$fontSize, mt_rand(-40, 70), $codeNX,$fontSize*1.5,$_color, $ttf, $code[$i]);写入随机的文字,这里要一个字一个字写.所以这个函数要循环调用.

   百度了一下 找到了一个类...如下

3. <?php
   /**
    * 安全验证码
    * 
    * 安全的验证码要：验证码文字扭曲、旋转，使用不同字体，添加干扰码。
    * 如果用中文做验证码(我这里不是哦，有兴趣你来改成用中文的)，安全度会更好些，但验证码扭曲和旋转是王道，用了字体也算是已经给字体扭曲了，我就不再去给他添一只扭曲的足了。
    * 可配置的属性都是一些简单直观的变量，我就不用弄一堆的setter/getter了
    *
    * @author 流水孟春 <cmpan(at)qq.com>
    * @copyright NEW BSD
    * @link _Security_Secoder
    * @link 
    */
   class YL_Security_Secoder {
   	/**
   	 * 验证码的session的下标
   	 * 
   	 * @var string
   	 */
   	public static $seKey = 'sid.sekey.ylans.cn';
   	public static $expire = 3000;     // 验证码过期时间（s）
   	/**
   	 * 验证码中使用的字符，01IO容易混淆，建议不用
   	 *
   	 * @var string
   	 */
   	public static $codeSet = '346789ABCDEFGHJKLMNPQRTUVWXY';
   	public static $fontSize = 25;     // 验证码字体大小(px)
   	public static $useCurve = true;   // 是否画混淆曲线
   	public static $useNoise = true;   // 是否添加杂点	
   	public static $imageH = 0;        // 验证码图片宽
   	public static $imageL = 0;        // 验证码图片长
   	public static $length = 4;        // 验证码位数
   	public static $bg = array(243, 251, 254);  // 背景
   	
   	protected static $_image = null;     // 验证码图片实例
   	protected static $_color = null;     // 验证码字体颜色
   	
   	/**
   	 * 输出验证码并把验证码的值保存的session中
   	 * 验证码保存到session的格式为： $_SESSION[self::$seKey] = array('code' => '验证码值', 'time' => '验证码创建时间');
   	 */
   	public static function entry() {
   		// 图片宽(px)
   		self::$imageL || self::$imageL = self::$length * self::$fontSize * 1.5 + self::$fontSize*1.5; 
   		// 图片高(px)
   		self::$imageH || self::$imageH = self::$fontSize * 2;
   		// 建立一幅 self::$imageL x self::$imageH 的图像
   		self::$_image = imagecreate(self::$imageL, self::$imageH); 
   		// 设置背景      
   		imagecolorallocate(self::$_image, self::$bg[0], self::$bg[1], self::$bg[2]); 
   		// 验证码字体随机颜色
   		self::$_color = imagecolorallocate(self::$_image, mt_rand(1,120), mt_rand(1,120), mt_rand(1,120));
   		// 验证码使用随机字体 
   		$ttf = dirname(__FILE__) . '/ttfs/' . mt_rand(1, 20) . '.ttf';  
   		
   		if (self::$useNoise) {
   			// 绘杂点
   			self::_writeNoise();
   		} 
   		if (self::$useCurve) {
   			// 绘干扰线
   			self::_writeCurve();
   		}
   		
   		// 绘验证码
   		$code = array(); // 验证码
   		$codeNX = 0; // 验证码第N个字符的左边距
   		for ($i = 0; $i<self::$length; $i++) {
   			$code[$i] = self::$codeSet[mt_rand(0, 27)];
   			$codeNX += mt_rand(self::$fontSize*1.2, self::$fontSize*1.6);
   			// 写一个验证码字符
   			imagettftext(self::$_image, self::$fontSize, mt_rand(-40, 70), $codeNX, self::$fontSize*1.5, self::$_color, $ttf, $code[$i]);
   		}
   		
   		// 保存验证码
   		isset($_SESSION) || session_start();
   		$_SESSION[self::$seKey]['code'] = join('', $code); // 把校验码保存到session
   		$_SESSION[self::$seKey]['time'] = time();  // 验证码创建时间
   				
   		header('Cache-Control: private, max-age=0, no-store, no-cache, must-revalidate');
   		header('Cache-Control: post-check=0, pre-check=0', false);		
   		header('Pragma: no-cache');		
   		header("content-type: image/png");
   	
   		// 输出图像
   		imagepng(self::$_image); 
   		imagedestroy(self::$_image);
   	}
   	
   	/** 
   	 * 画一条由两条连在一起构成的随机正弦函数曲线作干扰线(你可以改成更帅的曲线函数) 
        *      
        *      高中的数学公式咋都忘了涅，写出来
   	 *		正弦型函数解析式：y=Asin(ωx+φ)+b
   	 *      各常数值对函数图像的影响：
   	 *        A：决定峰值（即纵向拉伸压缩的倍数）
   	 *        b：表示波形在Y轴的位置关系或纵向移动距离（上加下减）
   	 *        φ：决定波形与X轴位置关系或横向移动距离（左加右减）
   	 *        ω：决定周期（最小正周期T=2π/∣ω∣）
   	 *
   	 */
       protected static function _writeCurve() {
   		$A = mt_rand(1, self::$imageH/2);                  // 振幅
   		$b = mt_rand(-self::$imageH/4, self::$imageH/4);   // Y轴方向偏移量
   		$f = mt_rand(-self::$imageH/4, self::$imageH/4);   // X轴方向偏移量
   		$T = mt_rand(self::$imageH*1.5, self::$imageL*2);  // 周期
   		$w = (2* M_PI)/$T;
   						
   		$px1 = 0;  // 曲线横坐标起始位置
   		$px2 = mt_rand(self::$imageL/2, self::$imageL * 0.667);  // 曲线横坐标结束位置 	    	
   		for ($px=$px1; $px<=$px2; $px=$px+ 0.9) {
   			if ($w!=0) {
   				$py = $A * sin($w*$px + $f)+ $b + self::$imageH/2;  // y = Asin(ωx+φ) + b
   				$i = (int) ((self::$fontSize - 6)/4);
   				while ($i > 0) {	
   				    imagesetpixel(self::$_image, $px + $i, $py + $i, self::$_color);  // 这里画像素点比imagettftext和imagestring性能要好很多				    
   				    $i--;
   				}
   			}
   		}
   		
   		$A = mt_rand(1, self::$imageH/2);                  // 振幅		
   		$f = mt_rand(-self::$imageH/4, self::$imageH/4);   // X轴方向偏移量
   		$T = mt_rand(self::$imageH*1.5, self::$imageL*2);  // 周期
   		$w = (2* M_PI)/$T;		
   		$b = $py - $A * sin($w*$px + $f) - self::$imageH/2;
   		$px1 = $px2;
   		$px2 = self::$imageL;
   		for ($px=$px1; $px<=$px2; $px=$px+ 0.9) {
   			if ($w!=0) {
   				$py = $A * sin($w*$px + $f)+ $b + self::$imageH/2;  // y = Asin(ωx+φ) + b
   				$i = (int) ((self::$fontSize - 8)/4);
   				while ($i > 0) {			
   				    imagesetpixel(self::$_image, $px + $i, $py + $i, self::$_color);  // 这里(while)循环画像素点比imagettftext和imagestring用字体大小一次画出（不用这while循环）性能要好很多	
   				    $i--;
   				}
   			}
   		}
   	}
   	
   	/**
   	 * 画杂点
   	 * 往图片上写不同颜色的字母或数字
   	 */
   	protected static function _writeNoise() {
   		for($i = 0; $i < 10; $i++){
   			//杂点颜色
   		    $noiseColor = imagecolorallocate(
   		                      self::$_image, 
   		                      mt_rand(150,225), 
   		                      mt_rand(150,225), 
   		                      mt_rand(150,225)
   		                  );
   			for($j = 0; $j < 5; $j++) {
   				// 绘杂点
   			    imagestring(
   			        self::$_image,
   			        5, 
   			        mt_rand(-10, self::$imageL), 
   			        mt_rand(-10, self::$imageH), 
   			        self::$codeSet[mt_rand(0, 27)], // 杂点文本为随机的字母或数字
   			        $noiseColor
   			    );
   			}
   		}
   	}
   	
   	/**
   	 * 验证验证码是否正确
   	 *
   	 * @param string $code 用户验证码
   	 * @return bool 用户验证码是否正确
   	 */
   	public static function check($code) {
   		isset($_SESSION) || session_start();
   		// 验证码不能为空
   		if(empty($code) || empty($_SESSION[self::$seKey])) {
   			return false;
   		}
   		// session 过期
   		if(time() - $_SESSION[self::$seKey]['time'] > self::$expire) {
   			unset($_SESSION[self::$seKey]);
   			return false;
   		}
   
   		if($code == $_SESSION[self::$seKey]['code']) {
   			return true;
   		}
   
   		return false;
   	}
   }
   
   
   // useage
   /*
   YL_Security_Secoder::$useNoise = false;  // 要更安全的话改成true
   YL_Security_Secoder::$useCurve = true;
   YL_Security_Secoder::entry();
   */
   
   /*
   // 验证验证码
   if (!YL_Security_Secoder::check(@$_POST['secode'])) {
   	print 'error secode';
   }
   */

4. 这是效果

以上就是我爱编程网为大家带来的web前端开发文字加粗 Web前端开发不能忽略的小问题，希望能帮助到大家，更多相关信息，敬请关注我爱编程网！