前端HTML

HTML是什么？

Html标签:超文本标记语言,就是标记用的.

超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm

HTML文档结构

最基本的HTML文档：

```html
<!DOCTYPE html> 
<html lang="zh-CN">   #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'

<head> 
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body> 

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

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

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

4. <title>、</title>定义了网页标题，在浏览器标题栏显示。（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了）

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

HTML注释

<!--注释内容-->  #找到一行内容ctrl+/就能注释，注释的内容不会在网页上显示出来

域名解析

域名 -- ip地址 -- 192.168.1.10

https://192.168.1.10:80  -- www.jd.com  -- DNS解析 {'www.jd.com':'192.168.1.10',}

请求和响应

请求:浏览器socket客户端给服务端发信息
响应:服务端socket给客户端回信息

HTML常用标签

标签分类

两类:
	内敛标签(行内标签):不独占一行,内敛标签只能嵌套内敛标签    b\i\u\s\button\span\img\a
	块级标签(行外标签):自己独占一行,可以嵌套内敛标签和某些块级标签   \h1-h6\br\hr\p\div
	p标签:不能嵌套p标签,也不能嵌套块级标签

head标签中的标签

<title></title>	定义网页标题
<meta/>	定义网页原信息\配置信息(了解)
<style></style>	定义内部样式表
<script></script>	定义JS代码或引入外部JS文件
<link/>	引入外部样式表文件

Meta标签介绍：

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> #如果把URL和后面的内容去掉，就是2秒钟刷新一次，这些内容了解一下就行
<!--指定文档的编码类型--> 
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器，你按照最高标准来渲染我的页面，了解一下就可以啦

　　2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的
#SEO就是做这个的，就是怎么让你们公司的网站在别人搜索的时候能够靠前显示，不算那个花钱的，百度是充值的，你冲个20w，别人可能一天就给你点击完了，特别的贵

<meta name="description" content="xxxxxpythonxxx学习">  #是对这个文档的描述，在百度一些内容的页面上，f12打开看看

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>

img标签

图片标签
属性 src='图片路径'  网络地址的绝对路径\本地相对路径
示例:
	<img src="1.jpg" alt="这是个美女,请稍等.." title="美女" width="200" height="200">
	<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
src的路径又分为两种：网上的一个图片路径和本地的一个相对图片路径

a标签超链接标签

属性
href:超链接的地址
target:是否新建窗口
target="_self"  当前窗口打开某个路径对应的html页面
target="_blank" 新建窗口打开某个路径对应的html页面
示例:
	<a href="https://www.baidu.com" target="_blank">百度</a>

什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分：为协议：http://、ftp://等 
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

列表标签

无序列表:   
type属性：
	disc（实心圆点，默认值）
	circle（空心圆圈）
	square（实心方块）
	none（无样式）
<ul type="none">
        <li>太白</li>
        <li>alexdsb</li>
        <li>景女神</li>
</ul>

有序列表:
type属性： start是从数字几开始
	1 数字列表，默认值
	A 大写字母
	a 小写字母
	Ⅰ大写罗马
	ⅰ小写罗马
    <ol type="a" start="2">
        <li>大壮</li>
        <li>B哥</li>
        <li>灭霸</li>
        <li>雪飞</li>
    </ol>

标题列表标签

就像大纲一样，有一个层级效果
<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

特殊字符

空格:&nbsp;
小于号:&lt;
大于号:&gt;
&符号:&amp;
¥符号:&yen;
版权标识（写公司网站的时候会用到）:&copy;
注册（一个圆圈里面有个R）:&reg;
...

表格标签(重点)

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

<table border="1" cellpadding="10" cellspacing="20">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>B哥</td>
                <td>40</td>
                <td>炒鸡蛋</td>
            </tr>
            <tr>
                <td>大壮</td>
                <td>38</td>
                <td>抽烟喝酒烫头</td>
            </tr>
            <tr>
                <td>雪飞</td>
                <td>18</td>
                <td>大壮</td>
            </tr>
        </tbody>
    </table>

![](C:\Users\安文\AppData\Roaming\Typora\typora-user-images\1561712909055.png)

form标签表单标签和input标签用户输入或者选择使用的标签

    action:指定数据提交路径
    input标签:
    	type属性:控制输入框的样式的
    	name属性:分组,携带数据的key   key:value
    	value:选择框提交数据的时的值,输入框的默认值
    input 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表单之后再学这个）
    	
    	
    <form action="http://127.0.0.1:8001">	#规定向何处提交表单的地址（URL）（提交页面）。

            用户名:<input type="text" name="username" value="dazhuang">
            密码:<input type="password" name="password" value="111">

            <input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="2">女

            <input type="checkbox" name="hobby" value="a"> 喝酒
            <input type="checkbox" name="hobby" value="b"> 抽烟
            <input type="checkbox" name="hobby" value="c"> 烫头
            <input type="submit">
            <hr>
        	<input type="date">
        	<input type="button" value="普通按钮">
        	<input type="reset">
        	<input type="hidden">
        	<input type="file">
    </form>
    
    form表单触发提交数据的操作,必须写在form表单标签里面,写在外面就是普通的按钮
    	<input type="submit">
    	<button>提交按钮</button>
   
input标签的其他属性
	checked默认选中
	 <input type="radio" name="sex" value="2" checked>女   #简写方式,当属性名和属性值相同时可简写
     <input type="checkbox" name="hobby" value="a"> 喝酒
     <input type="checkbox" name="hobby" value="b" checked="checked"> 抽烟
     <input type="checkbox" name="hobby" value="c" checked="checked"> 烫头

	readonly  只读 针对的是输入框  text password
	disabled  不允许操作  所有的input都可以设置
设置了readonly的标签,它的数据可以被提交到后台,设置了disabled的数据,是不能提交到后台的

select标签下拉选择框

单选
	<select name="city">
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
    </select>
多选:multiple
	<select name="city" multiple>
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">深圳</option>
   </select>

label标签

标识标签的功能的

方式1:for:执行对哪个标签进行标识
效果:点击label标签中的文字,就能让标识的标签获得光标
<label for="username">用户名</label>
<input id="username" type="text" name="username" value="dazhuang">
方式2:
        <label>
            密码:<input type="password" name="password" value="111" disabled>
        </label>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>
name：名称
rows：行数  #相当于文本框高度设置
cols：列数   #相当于文本框长度设置
disabled：禁用

posted @ 2019-06-28 17:18 爱文飞翔阅读(616) 评论(0) 编辑收藏举报

刷新页面返回顶部

爱文飞翔

https://github.com/aiwenfeixiang

前端HTML

前端HTML

HTML是什么？

HTML文档结构

HTML注释

域名解析

请求和响应

HTML常用标签

标签

标签分类

head标签中的标签

Meta标签介绍：

body标签中的基本标签

img标签

a标签超链接标签

列表标签

标题列表标签

特殊字符

表格标签(重点)

form标签表单标签和input标签用户输入或者选择使用的标签

select标签下拉选择框

label标签

textarea多行文本

公告

爱文飞翔

https://github.com/aiwenfeixiang

前端HTML

前端HTML

HTML是什么？

HTML文档结构

HTML注释

域名解析

请求和响应

HTML常用标签

标签

标签分类

head标签中的标签

Meta标签介绍：

body标签中的基本标签

img标签

a标签 超链接标签

列表标签

标题列表标签

特殊字符

表格标签(重点)

form标签 表单标签和input标签 用户输入或者选择使用的标签

select标签 下拉选择框

label标签

textarea多行文本

公告

a标签超链接标签

form标签表单标签和input标签用户输入或者选择使用的标签

select标签下拉选择框