Collection
Collection
第四期第一节课程作业（HML基础总结）
一、网页的架构如下
<DOCTYPE html> 网页类型声明
<html>
<head>网页头部信息（包含CSS及外部引用）用户是看不到的
<tilte></title>网站的标题 用户是可看到的
</head>
<body></body>网页主体内容，用户是可以看到的部分
</html>
<!DOCTYPE html> <html > <head> <meta charset="utf-8"> <title>HTML基础知识（多个实例展示）总结</title> </head> <body> <h2>我在PHP中文网学习</h2> <p>目前为止不太会总结，只能实例写出我学到的，希望能得到老师及同学建议</p> <p>以下内容靠自己记忆写出</p> </body> </html>
点击 "运行实例" 按钮查看在线实例
二、什么是元素？
用户看到的内容：字体：大小、颜色、加粗、 表格：背景颜色、表框、……统称为元素
三、元素通常的种类？
块级元素：<p>/<h1~h6>
行内元素：<span>
3.行内块级元素：<img>
<h2 style="background-color:red;">我在中文网学习，这是一个块级元素我添加一个背景颜色</h2> <p style="background-color:pink;">我在中文网学习，这是一个块级元素我添加一个背景颜色</p> <p style="background-color:blue;"><span style="background-color:red;>标签可以同时在一行</span>两个元素同时在一行就是行内元素</p> <p style="background-color:#f2f2f2;">我在PHP中文网学习<img src="" alt="img是一个特殊标签"></p>
点击 "运行实例" 按钮查看在线实例
四、文本格式化
<em></em> <i></i> 斜体
<b></b>加粗
text-align 文本居中 有三个属性 默认向左居中 left 居中 center 居右 right
<p>居左</p> <p style="text-align:center">居中</p> <p style="text-align:right">居右</p>
点击 "运行实例" 按钮查看在线实例
五、表格
<table>自定义表格
<tr>表头
<th>单元行
<td>单元格
<table border="1"> <tr> <th>交学费</th> <td>3600</td> <td>学习PHP</td> </tr> <tr> <th>买电脑</th> <td>5000</td> <td>练习代码</td> </tr> <tr> <th>送礼物</th> <td>520</td> <td>泡波波姐</td> </tr> </table>
点击 "运行实例" 按钮查看在线实例
六、表单
表单是在一对<form></form>中提交的 其中里面有几个常用标签：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)
下面是一个常见的注册用户表单
<form> <h3>用户注册</h3> <label for="name">用户名</label> <input type="text" name="name" id="name" placeholder="请使用英文+数字"> <label for="tel">手机号</label> <input type="text" name="tel" id="tel" placeholder="请使用大陆手机号"> <label for="password">密码</label> <input type="password" name="password" id="password" > <label for="password_config">确认密码</label> <input type="password" name="password_config" id="password_config" > <input type="submit" name="submit" value="提交"> </form>
点击 "运行实例" 按钮查看在线实例
七、CSS的使用及优先级
CSS样式分两种
在head中可以引入外部CSS文件
也可以在页面中 当前页面CSS优先
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>CSS选择器的优先级</title>
<style >
/*标签选择器*/
div{
font-size:14px;
background-color:#000;
color:#f2f2f2;
}
/*类选择器*/
.red{
font-size:16px;
background-color:red;
color:#f2f2f2;
}
/*ID选择器*/
#blue{
font-size:18px;
background-color:blue;
color:#f2f2f2;
}
</style>
</head>
<body>
<div>
大家好我是陈伟林
</div>
<div class="red">
大家好我是陈伟林
</div>
<div class="red" id="blue">
大家好我是陈伟林
</div>
<div class="red" id="blue" style="background-color:pink;">
大家好我是陈伟林
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
