HTML1_html1.1-CSDN博客

本文链接：https://blog.csdn.net/qq_43108343/article/details/82749214

HTML

HTML的概述和快速入门

HTML的概念

HTML:叫做超文本标记语言

HTML的作用

做网页

HTML的快速入门

1.HTML的后缀名 a.HTML b.HTM
2.HTML采用浏览器打开原因: 浏览器当中嵌入了解析HTML语法的内核.

3.HTML的基础语法
    <html>
   			    <head>
  			    <title> </title>
				    </head>
  			    <body>
    		        </body> 			
   </html>
4.注意事项 HTML标签只能"包裹嵌套",不能"交叉嵌套"

HTML的常用标签

HTML的注释写法

标题标签(数字越小,字越大)

        <h1></h1>  一级标题
		<h2></h2>  二级标题
		<h3></h3>  三级标题
		<h4></h4>  四级标题
		<h5></h5>  五级标题
		<h6></h6>  六级标题

字体标签 font

1.标准格式

   <font> 字体的设置 </font>

2.常见属性

    a.字体大小的设置 size="1"  范围1-7 数字越大,字体越大
  	b.字体颜色的设置 color="red" 红色  #00FF00 绿色
  	c.字体标签的设置 face="楷体" 一定要是自己系统当中有这个字体

3.加粗,斜体,下划线

    <b>字体会加粗</b>
  	<i>字体会倾斜</i>
  	<u>字体下划线</u>

格式化标签

1.换行

     <br> 也可以 <br/> 只有一半(无需包裹.只写一半)

2.段落

      <p> 长段文字 </p>

3.水平线

     <hr>
  	a.宽度 width 直接写数字表示像素,加上百分号表示比例.推荐百分号
  	b.高度 size 直接写数字表示像素,加上百分号表示比例.推荐百分号
  	c.颜色 color 
  	d.对齐方式  align="right"   left在左边 center在中间 right在右边
       <hr color="#FF9900" width="20%" size="8%" align="right">

4.居中标签的效果

         <center> 标签名称 ... </center>

特殊指令

1.空格效果  
2.请参考 CHM格式笔记. -> E扩展补充 -> b阶段html -> 04特殊字符编码表对照

图片标签 img

1.基本格式

<img src="路径">   <!-- 可以是网络路径,也可以是相对路径,不推荐绝对路径-->

2.设置图片的大小对齐位置

            a.大小设置 width 宽度, height 高度
			b.设置对齐方式 align
			<img src="" width="10%" height="10%" align="right"/>

3.相对路径的问题

            a.图片和网页在同一个目录 <img src="a.png"/>
			b.图片在其他目录,网页    <img src="../img/a.png"/>  网页在src图片在img ../返回上一层
			c.图片在其他目录,网页    <img src="img/a.png"/>     图片在网页的子目录

列表标签

1.有序列表 ol

         <ol type="A">
				<li> Java </li>
				<li> UI </li>
				<li> Python </li>
				<li> PHP </li>
				<li> 前端 </li>
		</ol>

2.无序列表 ul

            <ul>
				<li> Java </li>
				<li> UI </li>
				<li> Python </li>
				<li> PHP </li>
				<li> 前端 </li>
			</ul>

超链接标签 a

1.基础语法

<a href="http://www.baidu.com" target="_blank"> 点击访问百度网址 </a>

2.属性

href 可以是内网地址,可以是外网地址,可以是图片,可以是文本
			target 不写默认是在自己的页面打开,设置 _blank 在新的页面打开

后期学习的标签

1.两个标签

         <span> 有多大空间占据多大空间 </span> 
			<div> 独占一行 </div>

2.语义化标签(了解)

         <header> </header> HTML5后的头标签.只是阅读性高一点,没有实质的作用
			<footer> </footer> HTML5后的脚标签.只是阅读性高一点,没有实质的作用

表格标签

1.基础代码

<table border="1px" align="center" width="80%">
				<tr>
					<th> 表头第一列 </th>
					<th> 表头第二列 </th>
					<th> 表头第三列 </th>
				</tr>
				<tr>
					<td> 第一行第一列 </td>
					<td> 第一行第二列 </td>
					<td> 第一行第三列 </td>
				</tr>
				<tr>
					<td> 第二行第一列 </td>
					<td> 第二行第二列 </td>
					<td> 第二行第三列 </td>
				</tr>
			</table>

2.合并单元格

     a.两个属性
				colspan：合并列
				rowspan：合并行
     b.操作步骤
				I.确定是合并行 还是 合并列
				II.确定第一次出现的单元格是哪一个
				III.删除其他不要的行或者列