您的位置：首页 > Web前端 > HTML

Html边学边记——初级入门

2021-09-29 18:50 866 查看

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”方式, 不区分大小写

表单元素属性：

  • name属性 设置表单元素的名称，该名称是提交数据时的参数名
  • value属性 设置表单元素的值，该值是提交数据时参数名所对应的值
<!--
form : 表单标签 定义整体的表单区域 常用的表单元素标签有以下几种：
　　 label: 标记标签 表示表单元素的文字标注标签，定义文字标注(通常和input标签一起使用)
　　   input: 输入标签
　　     (type属性)
　　    　　text - 文本输入框
　　   　　 password - 密码输入框
　　  　　 radio - 单选框
　　  　　 checkbox - 复选框
　　   　　file - 上传文件
　　 　　 submit - 提交按钮
　　 　　 reset - 重置按钮
　　   textarea: 多行文本框
　　　　　　　button：定义可点击的按钮
　　  select: 下拉框
　　    　　option: 选项框 与 
<select>
标签配合，定义下拉列表中的选项
-->
<form action="" method= "">
<p>            <label>姓名:</label>            <input type="text">        </p>
<p>            <label>密码:</label>            <input type="password">        </p>
<p>            <label>性别:</label>            <input type="radio" name="name"> 男            <input type="radio" name="name"> 女        </p>
<p>            <label>爱好:</label>            <input type="checkbox"> 唱歌            <input type="checkbox" checked="checked"> 跑步   <!--设置默认勾选跑步 --!>         <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 selected>广州</option>  <!--默认选广州-->  </select>    </p>
<p>            <input type="submit" value="提交">            <input type="reset" value="重置">        </p>
　　 　　<p>　　　　　　　<button type="button" onclick="alert('Hello World!')">Click Me!</button>    </p>
　　 </form>　　

6 css

定义

(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。

基本语法

选择器{

样式规则

}

样式规则格式：

属性名1：属性值1;

属性名2：属性值2;

属性名3：属性值3;

...

选择器:是用来选择标签的，选出来以后给标签加样式。如给所有的div标签内容设置宽200 高150 背景 红色

div{
width:200px;
height:150px;
background:red;
}

　　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 标签选择器

​ 标签{

​ 属性:值

​ }

​ 根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置​

<style type="text/css">
p{
color: red;
}
</style>

<div>hello</div>
<p>hello</p>　　

​ 2 类选择器

需要给标签添加一个 class 属性,一个标签可以使用多个类,一个类选择器

​ 可以作用于多个标签

​ .类名 {

​ 属性: 值;

​ } 

<style type="text/css">
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
</style>

<div class="blue">这是一个div</div>
<h3 class="blue big box">这是一个标题</h3>
<p class="blue box">这是一个段落</p>　　 

​ 3 层级选择器

​ 选择器1和选择器2可以是任意的一种选择器

​ 选择器1 选择器2 {

​ 属性=值;

​ } 

<style type="text/css">
div p{
color: red;
}
.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
</style>

<div>
<p>hello</p>
</div>

<div class="con">
<span>哈哈</span>
<a href="#" class="pink">百度</a>
<a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>　　

注意点: 这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器​

4 id 选择器

在一个页面中,id 是唯一的,id 选择器只能作用域一个标签

​ #id值 {

​ 属性:值;

​ } 

#nonono {color: yellowgreen;}　　

​ 5 组选择器

​ 将多个选择器放在一块进行设置，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。

​ 选择器1, 选择器2, 选择器3, ... {

​ } 

<style type="text/css">
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
</style>

<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>　　

​ 6 伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器, 比如说: 鼠标悬停,改变背景色

​ 选择器:动作{

​ 属性:值;

​ }

<style type="text/css">
.box1{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}
</style>

<div class="box1">这是第一个div</div>

　　

所有 CSS 伪类

选择器例子例子描述
:active a:active 选择活动的链接。
:checked input:checked 选择每个被选中的 <input> 元素。
:disabled input:disabled 选择每个被禁用的 <input> 元素。
:empty p:empty 选择没有子元素的每个 <p> 元素。
:enabled input:enabled 选择每个已启用的 <input> 元素。
:first-child p:first-child 选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type p:first-of-type 选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus input:focus 选择获得焦点的 <input> 元素。
:hover a:hover 选择鼠标悬停其上的链接。
:in-range input:in-range 选择具有指定范围内的值的 <input> 元素。
:invalid input:invalid 选择所有具有无效值的 <input> 元素。
:lang(language) p:lang(it) 选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-child p:last-child 选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type p:last-of-type 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link a:link 选择所有未被访问的链接。
:not(selector) :not(p) 选择每个非 <p> 元素的元素。
:nth-child(n) p:nth-child(2) 选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n) p:nth-last-of-type(2) 选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n) p:nth-of-type(2) 选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type p:only-of-type 选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child p:only-child 选择作为其父的唯一子元素的 <p> 元素。
:optional input:optional 选择不带 "required" 属性的 <input> 元素。
:out-of-range input:out-of-range 选择值在指定范围之外的 <input> 元素。
:read-only input:read-only 选择指定了 "readonly" 属性的 <input> 元素。
:read-write input:read-write 选择不带 "readonly" 属性的 <input> 元素。
:required input:required 选择指定了 "required" 属性的 <input> 元素。
:root root 选择元素的根元素。
:target #news:target 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid input:valid 选择所有具有有效值的 <input> 元素。
:visited a:visited 选择所有已访问的链接。

所有 CSS 伪元素

选择器例子例子描述
::after p::after 在每个 <p> 元素之后插入内容。
::before p::before 在每个 <p> 元素之前插入内容。
::first-letter p::first-letter 选择每个 <p> 元素的首字母。
::first-line p::first-line 选择每个 <p> 元素的首行。
::selection p::selection 选择用户选择的元素部分。

8.css 属性

1. 布局常用样式属性

  • width 设置元素(标签)的宽度，如：width:100px;
  • height 设置元素(标签)的高度，如：height:200px;
  • background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
  • border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
  • 以上也可以拆分成四个边的写法，分别设置四个边的：
  • border-top 设置顶边边框，如：border-top:10px solid red;
  • border-left 设置左边边框，如：border-left:10px solid blue;
  • border-right 设置右边边框，如：border-right:10px solid green;
  • border-bottom 设置底边边框，如：border-bottom:10px solid pink;
<style>

.box1{
width: 200px;
height: 200px;
background:yellow;
border: 1px solid black;
}

.box2{
/* 这里是注释内容 */
/* 设置宽度 */
width: 100px;
/* 设置高度 */
height: 100px;
/* 设置背景色 */
background: red;
/* 设置四边边框 */
/* border: 10px solid black; */
border-top: 10px solid black;
border-left: 10px solid black;
border-right: 10px solid black;
border-bottom: 10px solid black;
/* 设置内边距， 内容到边框的距离，如果设置四边是上右下左 */
/* padding: 10px;   */
padding-left: 10px;
padding-top: 10px;
/* 设置外边距，设置元素边框到外界元素边框的距离 */
margin: 10px;
/* margin-top: 10px;
margin-left: 10px; */
float: left;
}

.box3{
width: 48px;
height: 48px;
background:pink;
border: 1px solid black;
float: left;
}

</style>

<div class="box1">
<div class="box2">
padding 设置元素包含的内容和元素边框的距离
</div>
<div class="box3">
</div>
</div>

　　

2. 文本常用样式属性

  • color 设置文字的颜色，如： color:red;
  • font-size 设置文字的大小，如：font-size:12px;
  • font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
  • font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
  • line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
  • text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
  • text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
  • text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
<style>
p{
/* 设置字体大小  浏览器默认是 16px */
font-size:20px;
/* 设置字体 */
font-family: "Microsoft YaHei";
/* 设置字体加粗 */
font-weight: bold;
/* 设置字体颜色 */
color: red;
/* 增加掉下划线 */
text-decoration: underline;
/* 设置行高  */
line-height: 100px;
/* 设置背景色 */
background: green;
/* 设置文字居中 */
/* text-align: center; */
text-indent: 40px;
}

a{
/* 去掉下划线 */
text-decoration: none;
}
</style>

<a href="#">连接标签</a>
<p>
你好，世界!
</p>

　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航