前端开发 — HTML
2019-09-17 09:59:17来源:博客园 阅读 ()
前端开发 — HTML
HTML
HTML 超文本标记语言
HTML特征:
- 对换行和空格不敏感
- 空白折叠
1.1 HTML标签
标签也称为标记。
标签的种类:
- 1.双闭合标签
- 2.单闭合标签
1.1.1 head标签
meta 提供基本网站元信息的标签
<meta charset="UTF-8"> <!--标签的属性:使用的编码—'utf-8'-->
title 显示网站的标题
link 链接css资源文件、网站图标
<link rel="stylesheet" href="css/index.css">
script 链接脚本js(JavaScript)文件
<script src="js/index.js">
style 内嵌样式
1.1.2 body标签
1.1.2.1 标题标签
h1~h6标题标签
例:
标题1
1.1.2.2 段落标签
p标签 段落标签
<p>
人们感动于老英雄淡泊名利无私奉献的精神,敬佩老党员一辈子深藏功名、坚守初心的境界大家纷纷表示。
</p>
 ;空格字符
1.1.2.3 超链接标签
a (anchor 锚点)超链接标签
- href :
- 链接到一个新的地址
- 回到顶部
- 跳转邮箱
- 下载文件
- title 鼠标悬浮上的标题
- style 行内样式
- target 目标
- 默认是_self ,在当前页面中打开新的链接
- _blank 在新的空白页面打开新的链接
<a href="https://www.apeland.cn" style="text-decoration:none;color:red; " title="小圆圈">小猿圈</a>
<!--text-decoration:none 去掉链接的下划线-->
<h6 id="top"></h6>
<a href="#top">回到顶部</a> <--跳转到 id="top" 处-->
1.1.2.4 图片标签 img
- src 链接的图片资源的地址
- title 鼠标悬浮时显示的标题
- style
- alt 图片加载失败的时候显示的标题
<img src="images/timg.jpg" alt="校花" width="200" height="300">
<--width 图片宽度,height 图片高度-->
图片可以和超链接合用 a + img:
<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%A0%A1%E8%8A%B1&step_word=&hs=2&" title="美眉">
<img src="images/timg.jpg" alt="校花" width="200">
</a>
1.1.2.5 字体标签
<u> </u>
下划线
<b> </b>
加粗
<strong> </strong>
加粗
<em> </em>
斜体
<i> </i>
斜体
1.1.2.6 特殊字符
:空格 (non-breaking spacing,不断打空格)<
:小于号(less than)>
:大于号(greater than)&
:符号&
"
:双引号'
:单引号©
:版权?
™
:商标?
1.1.2.7 列表标签
1.ul无序列表标签
ul — unordered list
它的子标签是li
type属性:(默认实心圆)
- square 方形
- circle 圆心
<h3>我的teacher</h3> <ul type="square"> <li> <a href="">小米手机</a> </li> <li>女神</li> <li>太白</li> <li>mjj</li> <li>江老板</li> </ul>
2.ol有序列表标签
ol — ordered list
- 它的子标签也是li
- type属性:(默认1,2,3……)
- a
- A
- i
- I
- start属性:定义开始的位置
<h3>我的课程</h3> <ol type="i"> <li>python</li> <li>web前端</li> <li>java</li> <li>linux</li> </ol>
1.1.2.8 表格标签 table
- th定义表头
- tr定义表行
- td定义表单元格数据
<!--border 外边框,cellspacing外边框间的间隙,width宽度填充整个屏幕-->
<table border="1" cellspacing="0" width="100%">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<td>sex</td>
</tr>
<tr>
<td>1</td>
<td>沛齐</td>
<td>19</td>
<td>女</td>
</tr>
</table>
1.1.2.9 表单标签form
<1.>form表单
action 定义表单被提交时发生的动作,提交给服务器处理程序的地址(ip、端口);如果是空的字符串,它表示当前服务器地址
method
作用:定义表单提交数据时的方式
提交的方式:
get
默认值,明文提交,所提交的数据是可以显示在地址上,安全性低
提交数据有大小限制,最大为2KB
post
隐式提交-所提交的内容,不会显示到地址栏上,安全性高
无大小限制
<2.>表单控件分类
(1).input 组元素
1.type 控件的类型
text 单行文本输入框,明文显示用户输入的数据
<p id="username"> <input type="text" name="name" value=""> </p>
password 密码框,密文显示用户输入的数据
<p id="password"> <input type="password" name="pwd"> </p>
radio 单选框
- 产生互斥效果,给每个单选按钮设置相同的name属性值
- 如何默认选中,给单选按钮添加checked属性
<p> <input type="radio" name="sex" checked = 'checked'>男 <input type="radio" name="sex">女 </p>
checkbox 多选框
默认选中添加checked属性
<p> <input type="checkbox" name="a" value="唱歌"> 唱歌 <input type="checkbox" name="b" value="跳舞"> 跳舞 <input type="checkbox" name="c" value="音乐"> 音乐 </p>
file 上传文件所用
<input type="file">
datetime
submit 功能固定化,负责将表中的表单控件提交给服务端 — 提交按钮
<!--默认为提交按钮--> <input type="submit"> <--登录按钮--> <input type="submit" value="登录">
2.name 控件的名称,提交服务器的键值对的 name
3.value 控件的值,提交服务器的键值对的 value
(2).select 下拉列表 : multiple
name 下拉列表的名字
默认选中添加checked属性
option value
<select name="fav" multiple> <option value="smoke">吃饭</option> <option value="drink" selected>睡觉</option> <!--默认选中项--> <option value="tangtou">打豆豆</option> <option value="tangtou">唱</option> <option value="tangtou">跳</option> <option value="tangtou">rup</option> <option value="tangtou">音乐</option> <option value="tangtou">烫头</option> <option value="tangtou">烫头</option> </select>
(3).textarea标签
textarea 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸
- name
value - cols 列
- rows 行
<textarea name="" id="" cols="30" rows="10"></textarea>
1.1.2.10 div标签
div(division:分割)标签称为盒子标签
div标签:把网页分割成不同的独立的逻辑区域
<div class="top_l">
<a href="#">小米商城</a>|
<a href="#">MIUI</a>|
<a href="#">lot</a>
</div>
如何让文本垂直和水平居中?
- 让行高等于盒模型的高度实现垂直居中
- 使用text-align:center;实现文本水平居中
<style>
div{
width:200px;
height: 60px;
background-color: red;
text-align:center;
line-height: 60px;
}
</style>
<div>
wusir
</div>
1.1.2.11 span标签
span标签: 小区域标签,在不影响文本正常显示的情况下,单独设置对应的样式
<div class="top_l">
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">MIUI</a>
<span class="sep">|</span>
<a href="#">lot</a>
<span class="sep">|</span>
<a href="#">云服务</a>
</div>
<style>
span.active{
font-weight:bold;
}
</style>
<p>
<span class='active'>央视网消息</span>(新闻联播):中共中央总书记、国家主席28日上午在北京人民大会堂亲切会见出席第九届世界华侨华人社团联谊大会和中华海外联谊会五届一次理事大会的全体代表,代表党中央、国务院向大家表示热烈欢迎和衷心祝贺,向世界各地华侨华人致以诚挚问候。
</p>
1.1.2.12 lable标签
lable标签:它中的for属性跟表单控件的id属性有关联
<form action="">
<label for="username">用户名:</label>
<input type="text" id="username">
<label for="pwd">密码:</label>
<input type="text" id="pwd">
</form>
1.1.2.13 br标签、hr标签
<br>
换行标签
<hr>
分割线标签
1.2 HTML标签的嵌套关系
1.块级标签(又叫行级标签)
- 1.独占一行
- 2.可以设置宽高,如果不设置宽,默认是父标签的100%宽度
常用的块级标签有: h1~h6 、ul 、ol 、li 、form 、table 、tr 、p 、div
2.行内标签(也叫内联元素)
- 1.在一行内显示
- 2.不可以设置宽高,如果不设置宽高,默认是字体的大小
常用的行内标签有: b 、strong 、i 、em 、a 、td 、span
3.行内块标签
行内块是属于行内标签的
- 1.在一行内显示
- 2.可以设置宽高
行内块标签:input 、img
4.在网页中:行内转块和行内块是非常实用的
- 我们可以通过display属性进行强制修改规则。
- 显示方式 display :
- inline 显示行内
- inline-block 显示行内块
- block 显示块
<style>
.box{
width: 200px;
height: 200px;
background-color: yellow;
display: inline;
}
a{
width: 100px;
height: 40px;
background-color: red;
/*显示方式: block 显示块,inline 显示行内 inline-block 显示行内块*/
display: inline-block;
/*文本排列方式:left-靠左 center-居中 right-靠右*/
text-align: center;
/*行高:一行的高度。当行高=盒子模型的高度 实现垂直居中*/
line-height: 40px;
/*文本修饰:none-无修饰(去除下划线),underline-下划线 ,line-through 删除线 ,over line-上划线*/
text-decoration: underline;
color: #333333;
}
</style>
<body>
<p class="box">wusir</p>
<a href="">百度一下</a>
<del>aaaaa</del> /*删除线*/
</body>
5.嵌套关系:
- 1.块级标签可以嵌套块级和行内以及行内块
- 2.行内标签尽量不要嵌套块级
- 3.p标签不要嵌套div,也不要嵌套p,可以嵌套 a / img / 表单控件
原文链接:https://www.cnblogs.com/yangjie0906/p/11404988.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:css的9个常用选择器
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash