html之标签

今日内容详细

head内常见标签(了解)

title
	用来写网页原标题
style
	可以直接在内部书写css代码来调节网页样式,但是严格意义上来说不同的语言应该存放在不同的文件夹内
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>按时发工资是每个员工的梦想</p>
    <p>资本家都应该被吊在路灯上</p>
    <p>中国没有资本家,只有"企业家"</p>
<!--水平线、换行-->
    <hr>
    <br>

image

特殊符号

<!--特殊符号-->
    a &gt; b  a>b
    a &lt; b  a<b
    何处望神州满眼&nbsp;风光北固楼&nbsp;&nbsp;&nbsp;天下兴亡多少事
	<br>有几个"&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>

image

常见标签之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>

image

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

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

image

posted @ 2021-08-02 14:46  wddwyw  阅读(69)  评论(0)    收藏  举报