html的学习总结

html叫做超文本标记语言 Hyper Text Markup language

web标准

结构标准:用于对网页元素进行整理和分类,主要是html 相当于人体 html
样式标准:用于设置网页元素的板式,颜色,大小,等外观样式css 指的是衣服 css
行为标准:指的是网页模型的定义以及数据交互的编辑既js 行为 js

html标签

特点:有始有终,有头有尾,成对出现,例如:

<div>
  <p>
    helloworld
  </p>
</div>

在vscode中输入! 或者 html5 就可以直接打出html完整的代码

h1~h6都是块标签

<img src="图片地址" alt="文字" title="测试"/> 
<!--当引用的图片地址不起作用(无法显示图片)时候,就会出现文字-->

div和span的区别

<!--div比作楼房,每一层,每一个教室,每一个教室-->
<div>
  <!--span比作每一个座位-->
  <span></span>
</div>

hr是下划线

del 删除线

strong 是粗体此时这个标签是一个强调标签,在读这个标签的时候会加强语气适配读网页的时候

b标签也是粗体,但是没有强调的作用

i标签是斜体,很多人都把当做icon引用小图片认为他全称是icon ,其实是误用,但可以这样使用.

标签本来是没有这个作用的,用的人多了就成了这个作用

a标签

<a href-"" target="">跳转</a> 
<!--href属性是写需要跳转的url地址(URL:统一定位符)-->
<!--target属性是 跳转方式-->

target属性

_self 默认值在本网页中打开可以不写
_blank 在新网页中打开

a标签的锚点定位-重点

第一步为跳转目标提供id属性
给a标签加上**href="#id"**就可以实现跳转

<!--2.给a标签加上href="#p1"就可以实现跳转了-->
<a href="#p1">标题</a>
<a href="#p2">中部</a>
<a href="#p3">尾部</a>
<!--1.为跳转目标加上id属性p1-->
<h2 id="p1">琵琶行</h2>
<p>浔阳江头夜送客，枫叶荻花秋瑟瑟</p>
<p>主人下马客在船，举酒欲饮无管弦。</p>
<p>醉不成欢惨将别，别时茫茫江浸月。</p>
<p>忽闻水上琵琶声，主人忘归客不发。</p>
<p>寻声暗问弹者谁？琵琶声停欲语迟。</p>
<p>移船相近邀相见，添酒回灯重开宴19。</p>
<p>千呼万唤始出来，犹抱琵琶半遮面。</p>
<p>转轴拨弦三两声，未成曲调先有情。</p>
<p>弦弦掩抑声声思，似诉平生不得志。</p>
<p>低眉信手续续弹，说尽心中无限事。</p>
<p>轻拢慢捻抹复挑，初为霓裳后六幺23。</p>
<p>大弦嘈嘈如急雨，小弦切切如私语25。</p>
<p>嘈嘈切切错杂弹，大珠小珠落玉盘。</p>
<p>间关莺语花底滑，幽咽泉流冰下难27。</p>
<p>冰泉冷涩弦凝绝，凝绝不通声暂歇。</p>
<p>别有幽愁暗恨生，此时无声胜有声。</p>
<p>银瓶乍破水浆迸，铁骑突出刀枪鸣。</p>
<p>曲终收拨当心画，四弦一声如裂帛。</p>
<p id="p2">东船西舫悄无言33，唯见江心秋月白。</p>

相对路径和绝对路径

相对路径就是以自己本身为参考系来找到地址

./ 表示当前文件

/images 表示访问当前images文件夹也可以直接写作images

../ 表示访问上级文件夹

ul>li 列表标签

无序列表 ul>li

ul>li这样写是在vscode这样写可以快速生成相应的标签

什么时候可以使用列表标签?

在网页中的元素,形成了一对多,多对一的关系的时候就可以ul列表标签.

多:是指多个相似的内容

列表是用来表示多个相似内容的容器

结构清晰/整齐/整洁

列表不拘泥于文本,而很可能是个复合结构,每个复合结构就是个li

有序列表ol>li

自定义列表dl>dt>dd

表格标签table>th,tr>td

<!--cellsspacing表示单元格之间的距离相当于外边距margin,cellpadding单元格内边距-->
<table border="1px solid skyblue" cellsspacing='20' cellpadding='30' width='500px' height="800px">
  <caption>表格标题</caption>
  <!--th默认加粗-->
  <th>
  	<td>格子</td>
  	<td>格子</td>
  </th>	
  <tr>
    <td>格子</td>
    <td>格子</td>
  </tr>
</table>

form表单

input标签

<input type='text' name='name' value="name" placehoder="请输入姓名">

type值

radio 单选框

<input type="radio" name="sex" value="male">male<br>
<input type="radio" name="sex" value="female">female<br>

checkbox 多选框

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<!--注意checkbox属性的name都是一样的.!>

select 复选框

<select name="cars">
  <option  value="volvo">volvo</option>
  <option value="audi">audi</option>
</select>

html学习总结day01