HTML基础

HTML介绍

HTML是什么？
  • 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
  • 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
  • 网页文件的扩展名：.html或.htm
HTML不是什么？
  • HTML是一种标记语言（markup language），它不是一种编程语言。
  • HTML使用标签来描述网页。不像python编程语言一样，有逻辑什么的，这个标记语言是没有逻辑的

image-20210906104447190

HTML文档结构

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

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

</body>
</html>

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

+ <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。
+ <title>、</title>定义了网页标题，在浏览器标题栏显示。（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了）
+ <body>、</body>之间的文本是可见的网页主体内容。
+ **注意：**对于中文网页需要使用 **<meta charset="utf-8">** 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
标签
必须是封闭的
<meta>
<h1></h1>
标签属性 id='xx' asdfsdaa='xxx'
<h1 id='xx'></h1>
标签分类
  • 两类：
    • 内敛标签（行内标签）：不独占一行，内敛标签只能嵌套内敛标签 b\i\u\s\button\span\img\a
    • 块级标签（行外标签）：自己独占一行，可以嵌套内敛标签和某些块级标签 \h1-h6\br\hr\p\div
    • p标签：不能嵌套p标签，也不能嵌套块级标签。
head标签中的标签
<title></title>  定义网页标题
<meta/>  定义网页原信息\配置信息
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">
a标签 超链接标签
属性：
	href：超链接的地址
	target：是否新建窗口
	target="_self" 当前窗口打开某个路径对应的html页面
	target="_blank" 新建窗口打开某个路径对应的html页面
	示例：
		<a href="https://www.baidu.com" target="_blank">百度</a>
列表标签
无序列表：
	<ul type="none">
        <li>老子</li>
        <li>儿子</li>
        <li>阿道夫</li>
	</ul>
有序列表：
	<ol type="a" start="2">
        <li>dfa</li>
        <li>fd</li>
        <li>fdsa</li>
        <li>cz</li>
	</ol>
标题列表标签
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
</dl>
特殊字符
空格(html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要这些特殊字符才能显示出空格效果) 	   &nbsp;
> 										&gt;
< 										&lt;
& 										&amp;
¥ 										&yen;
版权标识（写公司网站的时候会用到） 			 &copy;
注册（一个圆圈里面有个R） 					&reg;

表格标签（重点）

table
	cellpadding:文字和内边框的距离
	cellspacing:内边框和外边框的距离
	border：边框宽度
	
<table border="1" cellpadding="10" cellspacing="20">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaa</td>
            <td>bbb</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>ddd</td>
            <td>fff</td>
            <td>ggg</td>
        </tr>
    </tbody>
</table>
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 action="http://127.0.0.1:8001">

        用户名:<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="b" 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>

多选：
	<select name="city" multiple>
        <option value="1">北京</option>
        <option value="2" selected>上海</option>
        <option value="3">深圳</option>
	</select>
lable标签
方式1：for：执行对哪个标签进行标识
效果：点击label标签中的文字，就能让标识的标签获得光标
	<lable for="username">用户名</lable>
	<input type="text" id="username" name="username" value="dazhuang">
	
方式2：
	<lable>
    	密码：<input type="password" name="password" value="111" disabled>
	</lable>
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
    默认内容
</textarea>
name：名称
rows：行数  #相当于文本框的高度的设置
cols：列数  #相当于文本框的长度设置
disabled：禁用
posted @ 2021-09-06 13:02  齐天_大圣  阅读(107)  评论(0)    收藏  举报