HTML超文本标记语言

今日内容概要

主题:HTML超文本标记语言

• head内常见标签(了解)
• body内常见标签(重要)
• 基本标签
• 常见标签
• 特殊符号
• 列表标签(重要)
• 表格标签(重要)
• form表单标签(重要)

今日内容详细

head内常见标签(了解)

title
style
	内部可以直接书写css代码调节html样式
    但是严格意义上来说不同的语言应该存放在不同的文件夹内
link
	通过href参数引入外部css文件((绝对路径与相对路径))
script
	内部可以直接书写js代码
    也可以通过src参数引入外部的js文件(绝对路径与相对路径)
meta
	定义网页源信息
    	参数description
        	定义网站的简介
        参数keyword
        	定义用户可能搜索到的关键字 增加网页被搜索到的概率
"""针对head内标签 有一个大致的认识即可 无需深究"""

body内常见标签(重要)

"""
1.为什么有些标签独占一行 有些标签不占呢?(重要)
	html标签分为两大类
		1.行内标签	b s u i 
			自身文本多大就占多大
		2.块儿级标签 h p 
			标签独占一行
2.为什么有些标签有头有尾 有些标签就一个头(重要)
	html标签针对标签个数也有分类
		1.双标签
			有头有尾<h1></h1>
		2.自闭和标签
			有头<hr>
"""
<!--标题系列-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    没有标签包裹的文本
    没有标签包裹的文本
    没有标签包裹的文本
<!--加粗 斜体 下划线 删除线-->
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>
<!--段落标签-->
    <p>20岁超越30岁 40岁 50岁人的成就</p>
    <p>不吃学习的苦 就要加倍吃生活的苦</p>
    <p>年轻不是用来挥霍的资本 年轻是用来奋斗拼搏</p>
<!--水平线 换行-->
    <hr>
    <br>

特殊符号

<!--特殊符号-->
    a &gt; b
    a &lt; b
    何处望神州满眼&nbsp;风光北固楼天下兴亡多少事
    &yen;人民币
    &copy;版权
    &reg;商标	
    &amp;特殊&符

常见标签之a链接标签

<a href='https://www.baidu.com'>百度</a>
	href参数
    	1.放网址点击可以直接跳转
        2.锚点功能
        	放其他标签的id值点击就可以跳转到对应的标签位置
    target参数
    	控制跳转页面是在当前页还是新建页
        	_self
            _blank

标签两大重要属性(重要)

1.id值
	类似于标签的身份证号码 在同一个html文件内 id值不能重复
    	<a id='d1'></a>
2.class值
	类似于标签的群体号码 多个标签可以属于一个群体 多个标签也属于多个群体
    	<a class='c1'></a>
        <a class='c1 c2'></a>

常见标签之img图片标签

<img src='111.jpg'/>
	src参数
    	1.可以放网络图片的地址
        2.也可以放本地图片的地址
    title参数
    	鼠标悬浮在图片上之后可以展示的文字信息
    alt参数
    	图片由于某些原因加载不出来的时候可以提示的文字信息
    width、height参数
    	调节图片的长宽 默认调节一个就可以 另外一个等比例缩放
        如果两个都调节那么可能会出现图片失真的情况

常见标签之列表标签

# 1.无序列表(掌握)
	<ul>
        <li>小李</li>
        <li>小明</li>
        <li>小红</li>
    </ul>
    """页面上看似有规则的横向或者竖向一次排列的标签大概率都是无序列表"""
# 2.有序列表(了解)
	<ol type='A'>
        <li>小李</li>
        <li>小明</li>
        <li>小红</li>
	</ol>
# 3.标题列表(了解)
	<dl>
        <dt>标题1</dt>
        <dd>内容1</dd>
        <dt>标题2</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
    </dl>

常见标签之table表格标签(重要)

<table>
	<thead>
    	<tr>  # 一个tr就代表一行
            <th>序号</th>  # th加粗的文本
            <th>姓名</th>
            <th>年龄</th>
		</tr>
    </thead>  # 表头(字段名称)
	<tbody>
    	<tr>
            <td>1</td>  # td普通文本
            <td>jason</td>
            <td>18</td>
		</tr>
    </tbody>  # 表单(数据部分)
</table>

常见标签之form表单(重要)

"""该标签可以接受用户的数据并发送给后端服务器"""
获取用户数据的标签最为常见的就是input并且获取用户数据的标签最好都要有一个name属性用来表示该数据到底是用户的什么数据
	input标签  # 变形金刚
    	type参数
        	text
            password
            date
            email
            radio
            checkbox
            file
		   button  # 没有任何作用
            reset  # 重置
            submit  # 触发提交数据的动作
    select标签
    	下拉选择 
    textarea标签
    	大文本