1 2 3 4

HTML笔记

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

HTML

html参考手册

html标签 超文本标记语言，是一种创建于网页的标记语言，不一种编译语言

http 超文本传输协议

<!--声明是个html文件-->
<!--注释-->
<!Doctype html>
<html lang="zh-cn">  #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'
<head>渲染时的配置项
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>主页显示的内容

</body>
</html>

  1. <!DOCTYPE html>声明为HTML5文档。

    <html> </html>文档的开始和结束标记.是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。

    <head> </head>定义了HTML文档的头.它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。
    <title> </title>定义了网页(标签页的标题)标题,在浏览器标题栏显示

    <body> </body>之间的文本是可见的网页的主体内容

html标签格式,严格封闭

  • HTML标签是由尖括号包围的关键字，如<html>, <div>等
  • HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
  • 也有一部分标签是单独呈现的，比如：<br/>、<hr/>、等。
  • 标签里面可以有若干属性，也可以不带属性。

　　标签的语法：

  • <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
  • <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
  • 几个重要的属性
    • id:定义标签的唯一ID,HTML文档树中唯一,
    • class:为html元素定义一个或多个类名
    • style:规定元素的行内样式
标签 意义
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息

body内常用标签（HTML中的重点）

基本标签（块级标签和内联标签）

块级标签(独占一行)：p、h1--h6、hr、div,from

内联标签(不独占一行)：b、i、u、s、span、img、a input , select,textarea

不加标签的纯文字也是可以在body中写的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p> #独占一个段落

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr> #就是单独个一个水平线
每次加上一些内容，别忘了刷新一下页面，才能看到新添加的效果或者内容，其实上面这些标签很少用

关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。div是可以包含div的

p标签比较特殊，不能包含块级标签，p标签也不能包含p标签。可以试一下p标签套p标签，f12你会发现三个p标签

特殊字符（还有好多其他的，可以直接百度搜HTML特殊符号对照表）

内容 对应代码
空格(html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要这些特殊字符才能显示出空格效果) &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权标识（写公司网站的时候会用到） &copy;
注册（一个圆圈里面有个R） &reg;

HTML特殊符号表

img标签 内联标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息(其他标签也可以使用)" width="宽(数字)" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签--超链接标签 内联标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

不写href属性，<a>百度</a>显示普通文本

<a href="" >百度</a> #写了herf属性但是没有值的效果，有特殊效果，文字有颜色，有下划线，点击刷新但当前页面
<a href="http://www.baidu.com" target="_blank" >百度</a> 有属性有值，新的标签页打开

<a herf = "#top">回到顶部</a>设置锚点方式一  回到 a标签的name=top的位置,写的是a标签name属性对应的值,写法 href='#值'
<a herf ="top">回到顶部</a> 是设置锚点方式二 回到标签id=top的位置  ,任意标签都可以不用特意设置a标签   herf 的值不用加#
target=_self 默认当前页面打开
target=_blank 打开一个新的标签页

列表

ul 无序标签

<ul type="disc">  #type控制样式
  <li>第一项</li>
  <li>第二项</li>
</ul>

　type属性：

  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）

ol 有序标签

<ol type="1" start="2"> #start 空着起始
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性： start是从数字几开始

  • 1 数字列表，默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

dl 标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

table 表格(重点)

table 表格 属性 border=1

thead 标题部分

tbody内容部分

tr 一行

th 一个单元格(标题里的有加粗效果)

td 一个单元格

<table border='1'>
  <thead> #标题部分
  <tr> #一行
    <th>序号</th> #一个单元格
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody> #内容部分
  <tr> #一行
    <td>1</td> #一个单元格
    <td>Egon</td>
    <td>杠娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

table属性

  • border: 表格边框.
  • cellpadding: 内边距 （内边框和内容的距离）
  • cellspacing: 外边距.（内外边框的距离）
  • width: 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行 td里使用
  • colspan: 单元格横跨多少列（即合并单元格） td里使用

form表单标签

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

action=“网址”将数据提交到网址

表单还可以包含textarea、select、fieldset和 label标签。

input标签

用户名(普通文本):<input type="text" name="username"/>
密码(密文):<input type="password" name="password"/>
性别:单选框
<input type="radio" name ="sex" value="1"/>男
<input type="radio" name ="sex" value="2"/>女
爱好:多选框
<input type="checkbox" name="hobby" value="1"/>抽烟  后台得到列表 hobby:[1,2,3]
<input type="checkbox" name="hobby" value="2" checked="checked"/>喝酒 
<input type="checkbox" name="hobby" value="3"/>烫头
<input type="checkbox" name="hobby" value="4"/>睡觉
出生日期:
<input type="data" />
<div>
<input type="submit" value="确定"/>
</div>

上传头像:
<input type="file"/>

input文本输入框,input标签如果想将数据提交到后台那么必须写name

input文本选择框 ,必须写name 和 value

input选择框name相同算是一组选择

checked="checked"属性 默认选中(属性名和属性值一样的属性 可以简写 ---只写属性名)

  • name：表单提交时的“键”，注意和id的区别
  • value：表单提交时对应项的值
    • type="button", "reset", "submit"时，为按钮上显示的文本年内容
    • type="text","password","hidden"时，为输入框的初始值
    • type="checkbox", "radio", "file"，为输入相关联的值
  • checked：radio和checkbox默认被选中的项
  • readonly：text和password设置只读,可以被提交
  • disabled：所有input均适用,不能被提交

　　　img

type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框（不显示明文） <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" name='x' />
radio 单选框 <input type="radio" name='x' />
submit 提交按钮 <input type="submit" value="提交" /> #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
reset 重置按钮 <input type="reset" value="重置" /> #页面不会刷新，将所有输入的内容清空
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" /> （等学了form表单之后再学这个）
button 普通的按钮 <button> 在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。</button> 
<form action="http://127.0.0.1:8848" method="post"> method的值get显式的  post隐式的
  
</form>

from表单

action:值是一个网址,将数据传输到网址
method:提交方法,默认是get,效果是在网址上可以看到提交的数据

注意,想通过form表单标签来提交用户输入的数据,必须在form表单里面写你的input标签,并且必须有个提交按钮,按钮有两种,1: input标签type='submit', 2: botton按钮

select 下拉框

<form action="" method="post">
  <select name="city" id="city" multiple>
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option> #默认选中，当属性和值相同时，可以简写一个selected就行了
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

multiple属性,多选,name属性提交数据时的键,option标签中value属性的值需要写,是将来提交数据的真实数据city:[1,2,3,4]


单选下拉框:
<select name='city'>
	<option value='a'>沙河</option>
	<option value='b'>沙河</option>
</select>  
提交的数据:
	city:a

多选下拉框
<select name='hobby' multiple='multiple'>
	<option value='a'>肤白</option>
	<option value='b'>貌美</option>
	<option value='c'>大长腿</option>
</select>
提交的数据:
	hobby:['a','b','c']

  • multiple：布尔属性，设置后为多选下拉框，否则默认单选

  • disabled：禁用

  • selected：selcet中的option中的属性 默认选中该项

  • value：定义提交时的选项值

label标签

　定义：<label> 标签为 input 元素定义标注（标记）。如果不用这个label给input标签一个标记，input会变黄，不影响使用，只是提示你，别忘了给用户一些提示，也就是这个label标签。
　　　　说明：

  1. label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容
  2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="" >
  <label for="username">用户名</label>  #for和input的id属性一样，就关联在一起了
  <input type="text" id="username" name="username">
  <label>用户名：<input type ="text" name=""><label>
</form>
　1.label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容
　2.<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

　　属性说明：

  • name：名称
  • rows：行数 #相当于文本框高度设置
  • cols：列数 #相当于文本框长度设置
  • disabled：禁用
  • maxlength
posted @ 2019-09-10 15:36  学霸君主  阅读(203)  评论(0)  编辑  收藏  举报