html（一）

Myth丶恋晨 2021-12-10 20:13 156阅读 0赞

**HTML简介**  
**1.超文本标记语言【HypeText Markup Languge 】**  
Html 纯文本 =》 文本、图片、列表

**2.浏览器：**  
五种： IE Chrome Firefox Opera Safari  
内核：Trident Chromiue Gecko Presto WebKit(Blink)  
兼容性问题【放一边】，Chrome 上运行

**3.开发工具**：  
DW/ subline / WebStrom / Hbuilder / notepad++

**4.HTML初体验**

<head>
    	
    	
    	<mate charset="utf-8" />
    	
    	<title>标题：第一个HTML</title>
    	
    </head
    
    <body>
    YC122班只有帅锅，木有妹子
    </body>

**5.开发规范-编码规范**  
标签结构：  
有始有终，小写规范  
内容结构：  
Body分工，内容其中  
注释结构：  
跨行注释，不要嵌套  
属性结构：  
键值双引，空格分隔

**6.计算机中的颜色体系：**  
三原色： 红 0~255 \#ff0000  
绿 0~255 \#00ff00  
蓝 0~255 \#0000ff

**7.标签讲解：**  
font标签  
属性：color=> 1.颜色名称  
2.16进制数字  
3．Rgb(0255,0255,0~255)  
Size => 取值范围【1~7】，默认值：3  
Face=> 字体样式【最好不要乱设】  
用法：  
font color=“orange” size=“5” face=“微软雅黑” >设置字体用的</font

标题标签：<H1~6>  
用法：![在这里插入图片描述][20190711213624241.png]  
横线标签：hr />  
横线  
属性：  
color: 设置颜色：  
size:设置横线粗细【px(像素)】  
width:设置横线长度【px|%】  
align:设置对齐方式【left|center|right】

例如：  
![20190711213737653.png][]

P段落标签  
用法：  
![内容][20190711213809776.png]  
属性：align:设置对齐方式【left|center|right】

前后换行，并且有16px 上下间距

原样标签：pre  
保持与 html格式一致

下划线标签 underline  
![内容][20190711213849147.png]

特殊字符标签：  
![空格：    not break space版权：		©注册商标：®			22 === 22H2O== H2O][_ not break space_22 _ 22H2O_ H2O]

链接与图表标签  
链接标签：《a》  
属性：  
href: 设置链接地址、

1.  链接站外地址，需要加上http://或者https://
2.  链接站内页面
3.  页面内的描点  
    Target: 指明页面显示的方式  
    \_blank== 在新窗口中显示  
    \_self===》在当前窗口中显示  
    \_parent  父级框架中显示  
    注意：没有href 属性，a标签的文字不是蓝色，也没有下划线

图片标签 【单标签】  
![在这里插入图片描述][20190711214029443.png]  
属性：  
Src: 设置图片路径【站内、站外】  
站内：相对路径【…/】  
站外： http://  
建议：使用站内  
Width: 设置宽度  
Height: 设置高度  
alt: 破图提示【兼容性问题】  
align: 文字与图片的对齐方式【top|middle|bottom|left|right】

列表标签  
无序列表

*  : unorder list 属性： type 设置列表项的 样式【disc| circle | square |none】
    
        <li>   列表项：  list  item
        
        有序列表
        <ol>  :   order list
        	属性：type 设置列表项的 样式【1，a,A,i,I】
        
        <li>   列表项：  list  item

例如：

<ul type="circle">
    		<li>瓜子</li>
    		<li>花生</li>
    		<li>啤酒</li>
    	</ul>
    	
    	<ol type="i">
    		<li>瓜子</li>
    		<li>花生</li>
    		<li>啤酒</li>
    	</ol>
    
    
    自定义列表
    <dl>  :   defined list
    <dt>  :   defined title  自定义标题【可以没有】

: defined data 自定义数据【有多个】

例如：

<dl>
    		<dt>列表标签</dt>
    		<dd>有序列表</dd>
    		<dd>无序列表</dd>
    		<dd>自定义列表</dd>
    	</dl>

滚动标签  
属性：  
direction 滚动的方向【left,right,up,down】  
behavior 滚动的形式【scroll, alternate,slide(只执行一次)】  
loop : 设置滚动的次数【-1 无限循环】  
scrollamount： 设置运动的速度  
事件：  
Onmouseout：鼠标移开事件  
οnmοuseοut=“this.start()” 运动  
onmouseover: 鼠标悬停事件  
οnmοuseοver=“this.stop()” 停止运动

表格标签：

Table 属性：  
border=“1” 设置边框  
width=“600” 设置宽度  
height=“200” 设置高度  
cellspacing=“0” 单元格之间的距离  
cellpadding=“0” 单元格边框与内容之间的距离  
align=“center” 对齐方式【left,center,right】

bgcolor=“green” 设置背景颜色 【不推荐使用，使用CSS样式来代替】  
background=“img/meinv1.jpg” 设置背景图片【不推荐使用，使用CSS样式来代替】

td 属性：  
width=“200” 设置宽度  
height=“100” 设置高度  
align : 内容水平对齐方式【left,center,right】  
valign: 内容垂直对齐方式【top,middle,bottom】  
bgcolor=“green” 设置背景颜色 【不推荐使用，使用CSS样式来代替】  
background=“img/meinv1.jpg” 设置背景图片【不推荐使用，使用CSS样式来代替】  
行列合并

[20190711213624241.png]: /images/20211210/4d263efa6932401dad31d58472d52623.png
[20190711213737653.png]: /images/20211210/703aa3cf9a534598b1a98f42748aa9a8.png
[20190711213809776.png]: /images/20211210/59c6d06b1e17420d8b0c0d2497cd9654.png
[20190711213849147.png]: /images/20211210/56b7a1a64e7f45b3a3245c5c044850cd.png
[_ not break space_22 _ 22H2O_ H2O]: /images/20211210/0cbdb338192d472b9ec4b8ef1dbd0b90.png
[20190711214029443.png]: /images/20211210/2d35c6d698d34b9ba1efa01a5329ce31.png