标签：itcast 入门 标签 选择器 Html id 表单 边学边 属性
1 html的基本结构
页身和页头(! + tab快捷键)
页头:header标签
页身:body标签
<!-- win: ctrl + / -->
<!-- mac: command + / -->
<!-- ! + tab -->
<!-- 文档声明: html文件 html5版本 -->
<!DOCTYPE html>
<!-- 告诉浏览器 html代码从这里开始 lang="en"声明英文-->
<html lang="en">
<!-- 页头 属性的设置 引入css js 相关的资源-->
<head>
<meta charset="UTF-8">
<!-- 移动端自适应 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题 -->
<title>老王</title>
</head>
<!-- 页身 -->
<body>
123
</body>
<!-- 告诉浏览器 html代码从这里结束 -->
</html>
2 html常见标签
双标签:
div: 容器标签
h1~6: 字体标签
p: 段落标签
单标签:
br: 换行标签
hr:横线
a:链接标签
img:图片标签
<!-- 1 双标签 -->
<!-- 字体标签 大小是从大到小的 -->
<h1>itcast</h1>
<h2>itcast</h2>
<h3>itcast</h3>
<h4>itcast</h4>
<h5>itcast</h5>
<h6>itcast</h6>
<!-- 段落标签 -->
<p>111</p>
<p>111</p>
<!-- 2 单标签 -->
<!-- 换行标签 -->
itcast
<br>
itcast
<!-- 横线标签 -->
<hr>
<!-- 3 带有属性的标签 -->
<!-- 图片标签 -->
<img src="./images/002.jpg" alt="百度">
<!-- 链接标签 写链接的时候必须写上http -->
<br>
<a href="./images/百度一下，你就知道.htm">baidu</a>
<!-- <a href="./images/百度一下，你就知道.htm">百度</a> -->
<!-- 所有的双标签都可以嵌套 -->
<a href="./images/百度一下，你就知道.htm">
<img src="./images/google.png" alt="123">
</a>
注意：标签不区分大小写，但是推荐使用小写。
3 表格标签
table:表格标签
th:表格头部
td:表格数据
tr:表格的行
<!--
table : 表格标签
(属性)
border="1px" style="border-collapse:collapse"
tr : 表格行标签
th : 表格头标签
td : 表格数据标签
-->
<table border="1px" style="border-collapse: collapse;">
<!-- 第一行 -->
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<!-- 第二行 -->
<tr>
<td>老王</td>
<td>18</td>
<td>男</td>
</tr>
<!-- 第三行 -->
<tr>
<td>老李</td>
<td>20</td>
<td>男</td>
</tr>
</table>
4 列表标签
ol:有序列表标签
ul:无序列表标签
li:列表标签
<!--
有序列表标签(ol标签)
无序列表标签(ul标签)
列表(li标签)
-->
<form action="">
</form>
<!-- 有序列表标签(ol标签) -->
<ol>
<li>python</li>
<li>java</li>
<li>c++</li>
</ol>
<!-- 无序列表标签(ul标签) -->
<ul>
<li>python</li>
<li>java</li>
<li>c++</li>
</ul>
5 表单标签
form:表单标签
属性:
action属性 设置表单数据提交地址
method属性 设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写
<!--
form : 表单标签
label: 标记标签(通常和input标签一起使用)
input: 输入标签
(type属性)
text - 文本输入框
password - 密码输入框
radio - 单选框
checkbox - 复选框
file - 上传文件
submit - 提交按钮
reset - 重置按钮
(value属性)
设定value值,用于网络间传输
(name属性)
设定key值,用于网络间传输
textarea: 多行文本框
select: 下拉框
option: 选项框
-->
<form action="">
<p> <label>姓名:</label> <input type="text"> </p>
<p> <label>密码:</label> <input type="password"> </p>
<p> <label>性别:</label> <input type="radio"> 男 <input type="radio"> 女 </p>
<p> <label>爱好:</label> <input type="checkbox"> 唱歌 <input type="checkbox"> 跑步 <input type="checkbox"> 游泳 </p>
<p> <label>照片:</label> <input type="file"> </p>
<p> <label>个人描述:</label> <textarea></textarea> </p>
<p> <label>籍贯:</label> <select> <option value="">北京</option> <option value="">上海</option> <option value="">深圳</option> <option value="">广州</option> </select> </p>
<p> <input type="submit" value="提交"> <input type="reset" value="重置"> </p>
</form>
6 css
导入方式(html的头部中导入)
1 外链式(最常用的)
<link rel="stylesheet" href="./css/main.css">
2 内嵌式
<!-- 2 内嵌式 -->
<style>
/* 在style里写css代码 */
/* 作用于整个页面的所有的div标签的 */
/* div{
background: chartreuse;
} */
</style>
3 行内式(基本不用)
<div style="height: 50px; width: 50px; aqua;">itcast</div>
7 选择器
1 标签选择器
标签{
属性:值
}
根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置
2 类选择器
需要给标签添加一个 class 属性,一个标签可以使用多个类,一个类选择器
可以作用于多个标签
.类名 {
属性: 值;
}
3 层级选择器
选择器1和选择器2可以是任意的一种选择器
选择器1 选择器2 {
属性=值;
}
4 id 选择器
在一个页面中,id 是唯一的,id 选择器只能作用域一个标签,不推荐使用
#id值 {
属性:值;
}
5 组选择器
将多个选择器放在一块进行设置
选择器1, 选择器2, 选择器3, ... {
}
6 伪类选择器
主要用在用户和网站的交互上, 比如说: 鼠标悬停,改变背景色
选择器:动作{
属性:值;
}
标签：itcast,入门,标签,选择器,Html,id,表单,边学边,属性 来源： https://www.cnblogs.com/wenshi-jj/p/15354109.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。