网页基础：
HTML5
超文本标记语言，负责生成页面内容
标记
由标签组成，之间可相互嵌套。头标签和尾标签的区别:有一个 /
基本组成
<html>
<head>
<title>网页标题</title>
# head用来引入外部文件
# 例如 <link rel="shortcut icon" href="//stdl.qq.com/stdl/skin/10/assets/img/favicon.dfb2d295.png">
</head>
<body>
</body>
</html>
基本标签
1.标题标签
<hn> </hn> # n为1~6的数字，数字越大，标题越小，字体自动加粗
<h5> hello ha</h5>
2.横线标签
<hr 属性：size="线的粗细px" color="red"> # 颜色表示方法 英文单词 三原色RGB(0-255,0-255,0-255)
<hr size="10px"color="pink">
3.段落标签
<p>独占一行</p> <br>段落内换行</br>
<span>要显示的内容，不会独占一行，没有换行功能</span>
<p>回到12年前<br><br>回忆就在眼前</p>
4.超链接标签
<a href='要跳转的路径'>链接名</a>
<a href='http://www.baidu.com'>百度一下</a>
5.图片标签
<img src='图片路径/图片地址'width='宽'height='高'/>
<img src='../week6/qiqi.jpg' width='300px' height='300px'/>
6.表格标签
<table>
<tr> # 行
<td></td> # 列
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<table border="2"width="200px"height="300px">
<tr>
<td rowspan="2" span="2"></td>
<td></td>
<!--合并第一行和第二行，此时需要删除第二行的第一列-->
</tr>
<tr>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<!--列合并，合并第三行的第一二列，此时需要删除第三行的第二列-->
</tr>
</table>
7.文本域标签
<textarea cols="5px"rows="10px"></textarea>
<textarea cols="40px"rows="20px">
您对以下网络研讨会的注册已被批准。我们将准时开始该活动。
</textarea>
8.列表项标签
<li></li> # 分为两种：无序列表<ul></ul>有序列表<ol></ol>
<ul>
<li>回到12年前</li><br>
<li>回忆就在眼前</li><br>
<li>你戴着帽子而我样子带着腼腆</li><br>
</ul>
<ol>
<li>回到12年前</li><br>
<li>回忆就在眼前</li><br>
<li>你戴着帽子而我样子带着腼腆</li><br>
</ol>
9.容器标签
div将html划分块级，独占一行
作用：与css连用做网页布局
<div style="color:#0000FF"> # 将文档中的一个区域将显示为蓝色
<h3>这是一个在 div 元素中的标题。</h3>
<br>这是一个在 div 元素中的文本。</br>
</div>
10.表单标签
<form action="服务器的路径"method="get|post">
</form>默认get方法提交 参数显示在地址栏上
<form action="#"method="get">
<!--for的相关组件-->
<!--文本框-->
用户:<input type="text" onblur="getName()"><br><br>
密码:<input type="password"><br><br>
<!--单选按钮-->
性别：<input type="radio" name="sex">男
<input type="radio" name="sex">女<br><br>
<!--复选按钮-->
爱好:<input type="checkbox" >吃
<input type="checkbox" >喝
<input type="checkbox" >玩
<input type="checkbox" >乐<br><br>
<!--下拉列表-->
地址：<select>
<option>山西省</option>
<!--selected="selected"默认选中-->
<option selected="selected">陕西省</option>
<option>广西省</option>
<option>甘肃省</option>
</select>>
<select>
<option>西安市</option>
<option>太原市</option>
<option>兰州市</option>
<option>长沙市</option>
</select>>
<select>
<option>临潼区</option>
<option>高新区</option>
<option>未央区</option>
<option>雁塔区</option>
</select>><br><br>
<!--日期-->
出生年月:<input type="date"><br><br>
<!--文件框-->
相关文件:<input type="file"><br><br>
<!--按钮-->
<input type="reset">
<input type="submit">
</form>
css层叠样式表
作用为控制页面内容的显示样式
行内样式
<p style="样式内容"></p>
- 背景：background-color
background-image
background-repeat 平铺方式 - 文本：
color：字体颜色
direction：文本方向 rtl ltr 右到左
line——height：行高 - 字体：
font-size：
font-family：字体种类
font-style：字体风格 normal italic：斜体
font-weight:字体加粗 - 边框：
border-width：边框粗细
border-color：边框颜色
border-style：边框样式
border-left top right bottom左边框
内部样式：
<head>
<style>
样式内容（通过选择器定位到标签，指定样式，标签选择器，类选择器，ID选择器，派生选择器）
</style>
</head>
标签选择器：根据标签名选择标签<p>
<style>
p{
color:red
}
</style>
类选择器：</span>
.s1{
color:blue
}
ID选择器：
#p1{
color:yellow
}
外部样式
将样式抽取成一个以.css结尾的文件，在页面引入
<link type="text/css"rel="stylesheet"href="test.css">
p{ # 建test.txt文件
color:red;
font-size:18px;
}
.s1{
color:blue
}
#p1{
color:yellow
}
网页设计
<!DOCTYPE html>
<!-- ctrl+/注释 -->
<html lang="en" xmlns="http://www.w3.org/1999/html">
<!--使所有浏览器都按标准的排版去设计-->
<head>
<meta charset="UTF-8">
<title>邓紫棋</title>
<link type="text/css"rel="stylesheet"href="test.css">
<!--使用外部样式-->
<script type="text/javascript">
function getName(){
alert("hello")
}
</script>
</head>
<body style="background-image:url(qiqi.jpg)">
<h5> hello ha</h5>
<h4> hello ha</h4>
<h3> hello ha</h3>
<hr size="10px"color="pink">
<h2> hello ha</h2>
<h1> hello ha</h1>
<form action="#"method="get">
<!--for的相关组件-->
<!--文本框-->
用户:<input type="text" onblur="getName()"><br><br>
密码:<input type="password"><br><br>
<!--单选按钮-->
性别：<input type="radio" name="sex">男
<input type="radio" name="sex">女<br><br>
<!--复选按钮-->
爱好:<input type="checkbox" >吃
<input type="checkbox" >喝
<input type="checkbox" >玩
<input type="checkbox" >乐<br><br>
<!--下拉列表-->
地址：<select>
<option>山西省</option>
<!--selected="selected"默认选中-->
<option selected="selected">陕西省</option>
<option>广西省</option>
<option>甘肃省</option>
</select>>
<select>
<option>西安市</option>
<option>太原市</option>
<option>兰州市</option>
<option>长沙市</option>
</select>>
<select>
<option>临潼区</option>
<option>高新区</option>
<option>未央区</option>
<option>雁塔区</option>
</select>><br><br>
<!--日期-->
出生年月:<input type="date"><br><br>
<!--文件框-->
相关文件:<input type="file"><br><br>
<!--按钮-->
<input type="reset">
<input type="submit">
</form>
<p>回到12年前<br><br>回忆就在眼前</p><!--标签选择器-->
<span class="s1">
<!--类选择器-->
你戴着帽子而我样子带着腼腆
</span>
<p id="p1">时间滴滴答，你还记得吗</p><!--id选择器-->
<ul>
<!--无序列表-->
<li>回到12年前</li><br>
<li>回忆就在眼前</li><br>
<li>你戴着帽子而我样子带着腼腆</li><br>
</ul>
<ol>
<!--有序列表-->
<li>回到12年前</li><br>
<li>回忆就在眼前</li><br>
<li>你戴着帽子而我样子带着腼腆</li><br>
</ol>
<a href='http://www.baidu.com'>百度一下</a>
<table border="2"width="200px"height="300px">
<tr>
<!--第一行的第一列是两行-->
<td rowspan="2"></td>
<td></td>
<!--第一行的第二列是一行-->
</tr>
<tr>
<td></td>
<!--第二行的第二列是一行-->
</tr>
<tr>
<td colspan="2"></td>
<!--第三行的第一列是两列-->
</tr>
</table>
<textarea cols="40px"rows="10px">
您对以下网络研讨会的注册已被批准。我们将准时开始该活动。
请至少比预定开始时间提前 10 分钟加入该研讨会以免错过宝贵的信息。
主题：工程学领域如何成功投稿国际学术期刊？
主持人：SAGE Publishing
</textarea>
<a href='http://www.upkao.com/zk/91883.html'>
<!--点击图片跳转链接-->
<img src='qiqi.jpg' width='300px' height='300px'/>
</a>
<div style="color:#0000FF">
<!--设置一块区域的格式-->
<h3>这是一个在 div 元素中的标题。</h3>
<br>这是一个在 div 元素中的文本。</br>
</div>
</body>
</html>
扫一扫
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
