061_html字符实体

1. html中的预留字符必须被替换为字符实体。

2. html实体

2.1. 在html中, 某些字符是预留的。

2.2. 在html中不能使用小于号(<)和大于号(>), 这是因为浏览器会误认为它们是标签。

2.3. 如果希望正确地显示预留字符, 我们必须在html源代码中使用字符实体(character entities)。

2.4. 字符实体类似这样:

&entity_name;
或者
&#entity_number;

2.5. 使用实体名而不是数字的好处是, 名称易于记忆。不过坏处是, 浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

2.6. 实体名称对大小写敏感。

2.7. 字符实体还包括了数学符号、希腊字符、各种箭头记号、科技符号以及形状。

3. 不间断空格(non-breaking space)

3.1. html中的常用字符实体是不间断空格(&nbsp;)。

3.2. 浏览器总是会截短html页面中的空格。如果您在文本中写10个空格, 在显示该页面之前, 浏览器会删除它们中的9个。如需在页面中增加空格的数量, 您需要使用&nbsp;字符实体。

4. ASCII码字符实体

4.1. html和xhtml用标准的7比特ASCII代码在网络上传输数据。

4.2. 7比特ASCII代码可提供128个不同的字符值。

4.3. 最常用的ASCII码字符实体

4.4. 7比特可显示的ASCII代码

4.5. 7比特设备控制ASCII代码
ASCII设备控制代码最初被设计为用来控制诸如打印机和磁带驱动器之类的硬件设备。在html文档中这些代码不会起任何作用。

5. ISO-8859-1字符实体

5.1. html 4.01支持ISO-8859-1(Latin-1)字符集。

5.2. ISO-8859-1的较低部分(从1到127之间的代码)是最初的7比特ASCII。

5.3. ISO-8859-1的较高部分(从160到255之间的代码)全都有实体名称。

5.4. 这些符号中的大多数都可以在不进行实体引用的情况下使用,但是实体名称或实体编号为那些不容易通过键盘键入的符号提供了表达的方法。

5.5. ISO-8859-1 字符实体

6. html支持的数学符号

7. 例子

7.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>字符实体</title>
		
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			h1 {
				background-color: red;
			}
			div {
				background-color: orange;
				width: 40px;
				float: left;
			}
			p {
				background-color: green;
				display: inline-block;
				float: left;
			}
		</style>
	</head>
	
	<body>
		<h1>7比特可显示的ASCII代码</h1>
		<div>32</div><p>&#32;这是字符空格, 多个会合并</p><br />
		<div>33</div><p>&#33;</p>
 		<div>34</div><p>&#34;</p>
	 	<div>35</div><p>&#35;</p>
	 	<div>36</div><p>&#36;</p>
	 	<div>37</div><p>&#37;</p>
	 	<div>38</div><p>&#38;</p>
	 	<div>39</div><p>&#39;</p>
	 	<div>40</div><p>&#40;</p>
	 	<div>41</div><p>&#41;</p>
	 	<div>42</div><p>&#42;</p>
	 	<div>43</div><p>&#43;</p>
	 	<div>44</div><p>&#44;</p>
	 	<div>45</div><p>&#45;</p>
	 	<div>46</div><p>&#46;</p>
	 	<div>47</div><p>&#47;</p><br />
	 	<div>48</div><p>&#48;</p>
	 	<div>49</div><p>&#49;</p>
	 	<div>50</div><p>&#50;</p>
	 	<div>51</div><p>&#51;</p>
	 	<div>52</div><p>&#52;</p>
 		<div>53</div><p>&#53;</p>
	 	<div>54</div><p>&#54;</p>
 		<div>55</div><p>&#55;</p>
	 	<div>56</div><p>&#56;</p>
		<div>57</div><p>&#57;</p><br />
	 	<div>58</div><p>&#58;</p>
 		<div>59</div><p>&#59;</p>
 		<div>60</div><p>&#60;</p>
 		<div>61</div><p>&#61;</p>
 		<div>62</div><p>&#62;</p>
 		<div>63</div><p>&#63;</p>
 		<div>64</div><p>&#64;</p><br />
 		<div>65</div><p>&#65;</p>
 		<div>66</div><p>&#66;</p>
 		<div>67</div><p>&#67;</p>
 		<div>68</div><p>&#68;</p>
	 	<div>69</div><p>&#69;</p>
	 	<div>70</div><p>&#70;</p>
	 	<div>71</div><p>&#71;</p>
	 	<div>72</div><p>&#72;</p>
	 	<div>73</div><p>&#73;</p>
	 	<div>74</div><p>&#74;</p>
	 	<div>75</div><p>&#75;</p>
	 	<div>76</div><p>&#76;</p>
	 	<div>77</div><p>&#77;</p>
	 	<div>78</div><p>&#78;</p>
	 	<div>79</div><p>&#79;</p>
	 	<div>80</div><p>&#80;</p>
	 	<div>81</div><p>&#81;</p>
	 	<div>82</div><p>&#82;</p>
	 	<div>83</div><p>&#83;</p>
	 	<div>84</div><p>&#84;</p>
	 	<div>85</div><p>&#85;</p>
	 	<div>86</div><p>&#86;</p>
	 	<div>87</div><p>&#87;</p>
	 	<div>88</div><p>&#88;</p>
	 	<div>89</div><p>&#89;</p>
	 	<div>90</div><p>&#90;</p><br />
	 	<div>91</div><p>&#91;</p>
	 	<div>92</div><p>&#92;</p>
	 	<div>93</div><p>&#93;</p>
	 	<div>94</div><p>&#94;</p>
 	 	<div>95</div><p>&#95;</p>
	 	<div>96</div><p>&#96;</p><br />
	 	<div>97</div><p>&#97;</p>
	 	<div>98</div><p>&#98;</p>
	 	<div>99</div><p>&#99;</p>
	 	<div>100</div><p>&#100;</p>
	 	<div>101</div><p>&#101;</p>
	 	<div>102</div><p>&#102;</p>
	 	<div>103</div><p>&#103;</p>
	 	<div>104</div><p>&#104;</p>
	 	<div>105</div><p>&#105;</p>
	 	<div>106</div><p>&#106;</p>
	 	<div>107</div><p>&#107;</p>
	 	<div>108</div><p>&#108;</p>
	 	<div>109</div><p>&#109;</p>
	 	<div>110</div><p>&#110;</p>
	 	<div>111</div><p>&#111;</p>
	 	<div>112</div><p>&#112;</p>
	 	<div>113</div><p>&#113;</p>
	 	<div>114</div><p>&#114;</p>
	 	<div>115</div><p>&#115;</p>
	 	<div>116</div><p>&#116;</p>
	 	<div>117</div><p>&#117;</p>
 		<div>118</div><p>&#118;</p>
 		<div>119</div><p>&#119;</p>
 		<div>120</div><p>&#120;</p>
 		<div>121</div><p>&#121;</p>
 		<div>122</div><p>&#122;</p><br />
 		<div>123</div><p>&#123;</p>
 		<div>124</div><p>&#124;</p>
 		<div>125</div><p>&#125;</p>
	 	<div>126</div><p>&#126;</p><br />
		<h1>ISO-8859-1的较高部分(从160到255之间的代码)全都有实体名称。</h1>
	 	<div>160</div><p>&#160;这是html专用, 多个空格不会合并</p><br />
	 	<div>161</div><p>&#161;</p>
	 	<div>162</div><p>&#162;</p>
	 	<div>163</div><p>&#163;</p>
	 	<div>164</div><p>&#164;</p>
	 	<div>165</div><p>&#165;</p>
	 	<div>166</div><p>&#166;</p>
	 	<div>167</div><p>&#167;</p>
	 	<div>168</div><p>&#168;</p>
	 	<div>169</div><p>&#169;</p>
	 	<div>170</div><p>&#170;</p>
	 	<div>171</div><p>&#171;</p>
	 	<div>172</div><p>&#172;</p>
	 	<div>173</div><p>&#173;</p>
	 	<div>174</div><p>&#174;</p>
	 	<div>175</div><p>&#175;</p>
	 	<div>176</div><p>&#176;</p>
	 	<div>177</div><p>&#177;</p>
	 	<div>178</div><p>&#178;</p>
	 	<div>179</div><p>&#179;</p><br />
	 	<div>180</div><p>&#180;</p>
	 	<div>181</div><p>&#181;</p>
	 	<div>182</div><p>&#182;</p>
	 	<div>183</div><p>&#183;</p>
	 	<div>184</div><p>&#184;</p>
	 	<div>185</div><p>&#185;</p>
	 	<div>186</div><p>&#186;</p>
	 	<div>187</div><p>&#187;</p>
	 	<div>188</div><p>&#188;</p>
	 	<div>189</div><p>&#189;</p>
	 	<div>190</div><p>&#190;</p>
	 	<div>191</div><p>&#191;</p>
	 	<div>192</div><p>&#192;</p>
	 	<div>193</div><p>&#193;</p>
	 	<div>194</div><p>&#194;</p>
	 	<div>195</div><p>&#195;</p>
	 	<div>196</div><p>&#196;</p>
	 	<div>197</div><p>&#197;</p>
	 	<div>198</div><p>&#198;</p><br />
	 	<div>199</div><p>&#199;</p>
	 	<div>200</div><p>&#200;</p>
	 	<div>201</div><p>&#201;</p>
	 	<div>202</div><p>&#202;</p>
	 	<div>203</div><p>&#203;</p>
	 	<div>204</div><p>&#204;</p>
	 	<div>205</div><p>&#205;</p>
	 	<div>206</div><p>&#206;</p>
	 	<div>207</div><p>&#207;</p>
	 	<div>208</div><p>&#208;</p>
	 	<div>209</div><p>&#209;</p>
	 	<div>210</div><p>&#210;</p>
	 	<div>211</div><p>&#211;</p>
	 	<div>212</div><p>&#212;</p>
	 	<div>213</div><p>&#213;</p>
	 	<div>214</div><p>&#214;</p>
	 	<div>215</div><p>&#215;</p>
	 	<div>216</div><p>&#216;</p>
	 	<div>217</div><p>&#217;</p><br />
	 	<div>218</div><p>&#218;</p>
	 	<div>219</div><p>&#219;</p>
	 	<div>220</div><p>&#220;</p>
 		<div>221</div><p>&#221;</p>
	 	<div>222</div><p>&#222;</p>
	 	<div>223</div><p>&#223;</p>
	 	<div>224</div><p>&#224;</p>
	 	<div>225</div><p>&#225;</p>
	 	<div>226</div><p>&#226;</p>
	 	<div>227</div><p>&#227;</p>
	 	<div>228</div><p>&#228;</p>
	 	<div>229</div><p>&#229;</p>
	 	<div>230</div><p>&#230;</p>
	 	<div>231</div><p>&#231;</p>
	 	<div>232</div><p>&#232;</p>
	 	<div>233</div><p>&#233;</p>
	 	<div>234</div><p>&#234;</p>
	 	<div>235</div><p>&#235;</p>
	 	<div>236</div><p>&#236;</p><br />
	 	<div>237</div><p>&#237;</p>
	 	<div>238</div><p>&#238;</p>
	 	<div>239</div><p>&#239;</p>
	 	<div>240</div><p>&#240;</p>
	 	<div>241</div><p>&#241;</p>
	 	<div>242</div><p>&#242;</p>
	 	<div>243</div><p>&#243;</p>
	 	<div>244</div><p>&#244;</p>
	 	<div>245</div><p>&#245;</p>
	 	<div>246</div><p>&#246;</p>
	 	<div>247</div><p>&#247;</p>
	 	<div>248</div><p>&#248;</p>
	 	<div>249</div><p>&#249;</p>
	 	<div>250</div><p>&#250;</p>
	 	<div>251</div><p>&#251;</p>
	 	<div>252</div><p>&#252;</p>
	 	<div>253</div><p>&#253;</p>
	 	<div>254</div><p>&#254;</p>
	 	<div>255</div><p>&#255;</p>
	</body>
</html>

7.2. 效果图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值