HTML

最新推荐文章于 2022-12-04 19:34:20 发布

Aaron.Huang

最新推荐文章于 2022-12-04 19:34:20 发布

阅读量155

点赞数 1

分类专栏： WEB前端

本文链接：https://blog.csdn.net/ZUIHENderen46/article/details/82949295

版权

WEB前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML

Hyper Text Mark Language : 超文本标记语言
超文本:不仅仅包含文本,还包括文本的字体效果,多媒体相关(音频,视频)

学习HTML主要就是学有哪些标签,标签内部有哪些属性

<!DOCTYPE html><!-- 文档声明:告诉浏览器使用哪个版本的标准解析此页面 此写法是最高版H5的写法 -->
<html><!-- 除了声明,所有的标签都再html标签内部 -->
     <head><!-- 头:里面的内容是给浏览器看的 -->
           <meta charset="UTF-8"><!-- meta:告诉浏览器页面的字符集为UTF-8 -->
           <title>Insert title here</title><!-- title:页面标题,显示在浏览器的选项卡中 -->
     </head>    
     <body><!-- 体:里面的内容都是给用户看的 -->

     </body>
</html>

文本标签

h1-h6 内容标题辩前属性:align=left/right/center/justify
p 段落标签独占一行
hr 水平分割线单标签
br 换行

列表标签

无序列表:前端样式用type属性修改,

<ul>  unordered list
    <li></li> list item
    <li></li> 
</ul>

有序列表

<ol type="I" start="10" reversed="reversed"> ordered list
    <li>打开冰箱门</li>
    <li>大象塞进去</li>
    <li>关上冰箱门</li>
</ol>

定义列表

<dl>
<!-- defined list定义列表 -->
<dt>凉菜</dt><!-- defined title 定义标题 -->
    <dd>大拌菜</dd><!-- defined data 定义数据 -->
    <dd>花毛一体</dd>
    <dd>拍黄瓜</dd>
<dt>炒菜</dt>
    <dd>宫保鸡丁</dd>
    <dd>小炒肉</dd>
    <dd>口水鸡</dd>
    <del>大盘鸡</del><!-- 删除的 -->
    <ins>深海炸弹</ins><!-- 带下划线的 -->
</dl>

列表嵌套:有序列表和无须列表可以无限嵌套

元素(标签)的分类

块级元素 :独占一行
```
h1-h6 , p , hr
```
行内元素:和其他行内元素共占一行
```
em,i ; strong ,b ;u ;del ,s;
```
行内元素的多个空格折叠,当多个空格同时出现只能显示一个

常见特殊字符

1: 空格 &nbsp;
2: <  &lt;
3: >  &gt;

分区标签

自身没有显示效果,充当容器的作用,用于包含多个功能相关元素,,可以进行元素的整体控制

div :块级元素
span:共占一行,和行内的其他元素共占一行

- 开发页面时常分为三大区

<body>
    <div>头部</div>
    <div>体部</div>
    <div>脚部</div>
</body>

- H5标准中新增的分区标签:作用根DIV一样,但是更直观

    <body>
        <header>头部</header>
        <nav>导航</nav>
        <article>文章,正文</article>
        <footer>脚步</footer>
    </body>

图片 img

格式
```
<img src="图片路径">
```
路径分为两种：
1. 相对路径：访问站内资源使用相对路径 a.图片和页面同一目录，直接写图片名称 b.图片在页面的上级目录, ../图片名 c.图片在页面的下级目录, 文件夹名/图片名
2. 绝对路径：访问其它网站的资源使用绝对路径，以http开头，存在风险，如果目标图片路径发生改变则不能显示
常用属性：
1. alt: 当图片不能正常显示的时候显示此内容
2. title：当鼠标在图片上悬停的时候显示此内容
3. width/height: 设置图片的宽度和高度，可以设置像素px或百分比%，如果只设置宽度则高度等比例缩放
4. 支持的图片格式： jpg/jpeg不支持透明色 png支持透明色 GIF动图

图片地图

<img alt="" src="../imgs/1.jpg" width="1000px" usemap="#mymap">
<!-- 图像地图标签 -->
<map name="mymap" id="mymap">
    <!-- area:区域  shape:形状     rect:矩形    coords:坐标(对角线两个点的坐标(x1,y1,x2,y2))
        href:值为路径,可以写相对路径和绝对路径,路径可以直接指向页面,也可以指向文件,如果指向的文件浏览器不能打开则会触发下载
    -->
    <area alt="文字介绍" shape="rect" coords="100,100,200,200" href="demo06.html">

    <area alt="" shape="circle" coords="300,300,100" href="../imgs/k.jpg">

</map>

href: 值为路径，可以写相对路径和绝对路径，路径可以指向页面，图片，如果指向的文件浏览器不能打开则会下载此文件

超链接 a

格式:
```
<a href="http://www.baidu.com">百度</a>
```
href:值为路径,相对路径或者绝对路径,可以指向页面或者文件(浏览器支持的格式直接浏览.不支持直接下载)

target:_blank,跳转页面时开启一个新的页面显示,如果不加则从当前窗口跳转
a标签和img标签嵌套实现跳转
锚点(实现页面内的跳转) 锚点需要两个a标签,一个用于定位,一个用于跳转
```
<a id="top" name="top"></a>
.
.
.
.
<a href="#top">回到顶部</a>
```
可以直接在某些元素上加ID直接进行跳转不一定需要增加空a标签

表格table

table tr td
常见属性 : table :border->边框粗细;cellspacing->单元格与外边框的间距;cellspadding->单元格与内容之间的间距;bgcolor->背景颜色;width ;align
td属性:colspan->跨列;rowspan->跨行
表格分组标签:thead->头分组;tbody->体分组;tfoot->脚分组
th:表头和td的区别就是表头黑体加粗
caption:表名,剧中

表单相关

表单的作用就是获取用户输入的各种信息

常见表单相关的控件:文本框,密码框,单选,多选(复选)框,下拉选择,日期选择器,文件选择器,文本域,按钮

    <!-- action:提交的地址 -->
<form action="http://doc.tedu.cn">
    <!-- 文本框    
        size:长度;    name:提交数据时的键(key),用户输入的内容为值(value)
        maxlength:输入的最大字符数,超过这个值则输不进去
        value:设置默认值
        readonly="readonly" value="lala"
        readonly="readonly":属性和值都是一样,只读
        placeholder:占位文本,和value&readonly互斥
    --> 
    文本框---用户名:<input type="text" size="30" name="username" maxlength="5"  placeholder="用户名">

    <br>
    <!-- 密码框 -->
    密码框---密码:<input type="password" name="password" placeholder="密码" maxlength="6">

    <br>
    <!-- 单选 
        单选框必须具有相同的name属性,才能实现单选
        checked="checked":默认选中
    -->
    单选框---性别:<input type="radio" name="gender" value="male" checked="checked">男<input type="radio" name="gender" value="female">女


    <br>
    <!-- 多选框
        多选框也必须具有相同的name,不同的value
        扩大选择范围,将文本套入,在对应的单选或者多选中加入id,与对应的label标签中的for对应
        cked="checked"默认选中
     -->
    多选框---兴趣:<input type="checkbox" name="hooby" value="basketball" id="lq"><label for="lq">篮球</label>
                <input type="checkbox" name="hooby" value="football" id="zq"><label for="zq">足球</label>
                <input type="checkbox" name="hooby" value="swing" id="yy" ><label for="yy">游泳</label>
                <input type="checkbox" name="hooby" value="ludaima" id="ldm" checked="checked"><label for="ldm">撸代码</label>


    <br>
    <!-- 下拉选择 
        在selcet中加入name属性
        在option中加入value属性
        selected="selected"默认选中
    -->
    下拉选择-城市:<select name="city">
        <option>请选择</option>        
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gz" selected="selected">广州</option>
        <option value="hk">香港</option>
    </select>

    <br>
    <!-- 时间选择器 -->
    时间选择器---生日:<input type="date" name="birthday">

    <br>
    <!-- 文件选择器 -->
    文件选择器---靓照:<input type="file" name="pic">

    <br>
    <!-- 文件域 -->
    文件域---描述:<textarea rows="3" cols="20" name="intro">这家伙很懒....</textarea>


    <br>
    <!-- 隐藏域 
        表单需要向服务器提交数据,但是不需要向用户展示
    -->
    隐藏域:<input type="hidden" name="userid" value="12">

    <br>
    <!-- 重置按钮 -->
    重置:<input type="reset" value="Reset">

    <br>
    <!-- 自定义按钮 -->
    自定义按钮:<input type="button" value="自定义按钮" >

    <br>
    <!-- 颜色选择 -->
    颜色<input type="color" name="color">

    <br>
    <!-- 提交按钮
        向form的action地址提交请求,将参数以键值对的形式放在后面
     -->
    提交按钮:<input type="submit" value="提交/登录">

</form>

Aaron.Huang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

HTMLHyper Text Mark Language : 超文本标记语言超文本:不仅仅包含文本,还包括文本的字体效果,多媒体相关(音频,视频) 学习HTML主要就是学有哪些标签,标签内部有哪些属性 &lt;!DOCTYPE html&gt;&lt;!-- 文档声明:告诉浏览器使用哪个版本的标准解析此页面此写法是最高版H5的写法 --&gt;&lt;html&gt;&lt...
复制链接

扫一扫