html:是超文本标记语言,专门设计与编辑语言;
html元素基本构成:
<!doctype html> <!--文档申明-->
<html lang="en">
<head>
<meta charset="UTF-8"> <!--文档配置-->
<!--移动端口,视口设置-->
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 基础</title> <!--html标题标签-->
<link rel="stylesheet" href="./index.css"> <!--css外接样式,常用样式!!!-->
<link rel="stylesheet" href="./reset.css"> <!--样式重置,把页面边距去除!!!-->
<style type="text/css"> <!--css内接样式-->
.w1{ <!--对span属性w1设置,宽高不能设置,css内接样式-->
widht:400px;
height:300px;
color:red
}
span{
width:30px;
height:40px;
color:orange;
}
/*1.标签选择器*/
p{
}
/*重置样式*/
ul{ <!--把列表的前面的样式圆点,方点去除-->
list-style:none
}
/*2.类选择器 .类名*/
.l1{
color:red;
}
.sm{
font-size:40px;
text-decoration:underline <!--下划线-->
}
/*3.id选择器,id是唯一的*/
#p1{
font-size:20px;
color:red;
}
/*4.通配符选择器*/
*{ <!--选择所有标签,去除边距-->
padding:0px;
margin:0px;
}
input{ <!边款设置-->
widht:40px
height:20px;
border:1px solid bule;
font-size:20px;
}
</style>
<!-- <script style="text/JavaScript" src="./index.js"></script>-->
</head>
<body>
<!--div,p,h1~h6属于块级标签:可独占一行,设置宽高,如果不设置宽高则以父亲100%为宽,高度以内容高度为高度-->
<!--span,strong,em,i,del,a属于行内标签:在一行显示,不能设置宽高,默认宽度,以内容宽高为大小-->
<!--行内块标签:img,input——可以设置宽高,在一行显示-->
<div class="top-1" id="D1"> <!--div分割页面-->
<h1>进入标题1</h1> <!--页面标题-->
<hr /> <!--页面分割线-->
<p id="p1">内容显示0</p>
<p>内容显示1</p> <!--文本级标签,里面只能放文字、图片、表单元素,不能放容器级标签(div
,h,p标签)-->
<p><strong>内容显示2</strong></p> <!--字体加粗-->
<p><em>内容显示3</em></p> <!--字体斜体-->
<p><u>内容显示4</u></p> <!--字体加下划线-->
<p><i>内容显示5</i></p> <!--字体斜体-->
<p>内容<br>显示6</p> <!--文本分行-->
<p style="color:red;font-size:40px;">内容显示7</p> <!--css行内样式-->
</div>
<div class="top-2" id="D2">
<h2>进入标题2</h2>
<a href="www.baidu.com">Baidu百度</a> <!--超链接-->
<a href="./登录网页.html" id="anchor" class="anchor"
title="CSDN-专业IT技术社区=登录" target="_blank">Baidu百度</a> <!--链接本地文件-->
<a href="#" id="anchor2" class="anchor">Baidu百度</a>
<p>
<a href="#">google</a>
</p>
<p>
<span>文本1</span> <!--span是文本级标签可以放文本-->
</p>
<img src="./图片 (100).jpg" alt="渲染图片"> <!--图片标签,src链接图片资源,alt图片渲染失败出现的文本内容-->
<img src="./图片 (100).jpg" alt="渲染图片" width="100">
<img src="./图片 (100).jpg" alt="渲染图片" width="100"
height="100"> <!--weight与height设置一个值,不然图片可能会失真-->
<br><span class="w1">文本2</span>
</div>
<div class="top-3" >
<h3>进入标题3</h3>
<textarea name="" id="" cols="70" rows="10"></textarea> <!--文本输入-->
<form action="https://www.baidu.com/s"> <!--from表单标签action是需要做什么-->
<input type="text" name="wd" value="教科书问题"> <!--表单控件-->
</form>
<!--页面a,img,link默认是get;action:提交服务器网址;method:get(默认)post(应用:登录注册,上传文件);HTTP协议要约定-->
<form action="https://127.0.0.1:8800" method="get" Enctype="multipart/form-data"> <!--与服务器交互,一定要加Enctype="multipart/form-data",-->
<!--input:type(text:文本输入框;password:密码输入框;file:文件按钮,提交文件一定要用post;submit:提交按钮;
button:普通按钮;name:提交到服务器的key
;value:显示文本内容,与服务器端value-->
<label for="username">用户名</label> <!--for:是与下面的某个表单控件的id属性进行关联-->
<input type="text" name="username">
<br>
<label for="password">密码</label>
<input type="password" name="pwd">
<input type="submit" value="注册">
<p class="user">
<label for="username">用户名</label>
<input type="text" name="username">
</p>
<p class="pwd">
<label for="password">密 码</label>
<input type="password" name="pwd">
</p>
<p class="register">
<input type="submit" value="注册">
<input type="button" value="普通按钮1">
<button type="button">普通按钮2</button>
</p>
<p>
<input type="file" name="txt"> <!--上传文件-->
</p>
<p>
男:<input type="radio" name="sex" value="men"> <!--默认选择-->
女:<input type="radio" name="sex" value="women">
</p>
<p>
男:<input type="radio" name="sex" value="men" checked> <!---->
女:<input type="radio" name="sex" value="women">
</p>
<p>
<select name="school">
<option value='1'>小学</option>
<option value="2">中学</option>
<option value="3">高中</option>
<option value="4">大学</option>
<option selected="">研究生</option>
</select>
<p>
爱好:<input type="checkbox" name="love" value="eat"> 吃饭 <!--多选按钮-->
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="watch TV">看电视
<input type="reset" value="重置">
</p>
</form>
<a href="#D1">找h1</a> <!--通过id值目标查找,不建议使用-->
<a href="#">找h2</a> <!--通过id值目标查找,不建议使用-->
<a href="JavaScript:void(0);">找h2</a> <!--通过JavaScript阻止a点击操作-->
</div>
<div class="top-4">
<h4>进入标题4</h4>
<a href="JavaScript:void(0);">
<img src="https://www.yulumi.cn/gl/uploads/allimg/201128/162003D24-2.jpg" width="400">
</a>
<ul> <!--无序列表,大部分使用,ul的子元素只能是li-->
<li class="l1">进入无序列表表1</li>
<li class="l1 sm">进入无序列表2</li>
<li>进入无序列表3</li>
</ul>
<ul type="square"> <!--li块标签-->
<li>进入无序列表4</li>
<li>进入无序列表5</li>
<li>进入无序列表6</li>
</ul>
<ul type="circle"> <!--li块标签-->
<li>进入无序列表7
<ul> <!--li块链接标签嵌套列表-->
<li>嵌套列表0</li>嵌套列表1
</ul>
</li>
<li>进入无序列表8</li>
<li>进进入无序列表9</li>
</ul>
<ol> <!--有序列表-->
<li>进入有序列表1</li>
<li>进入有序列表2</li>
<li>进入有序列表3</li>
</ol>
<ol type="i" start="3"> <!--有序列表起始位置设置-->
<li>进入有序列表4</li>
<li>进入有序列表5</li>
<li>进入有序列表6</li>
</ol>
<ol type="i" > <!--有序列表罗马符序号-->
<li>进入有序列表7</li>
<li>进入有序列表8</li>
<li>进入有序列表9</li>
</ol>
<dl> <!--定义列表-->
<dt>列表标题定义1</dt> <!--列表标题设置-->
<dd>列表标题内容1</dd>
<dd>列表标题内容2</dd>
<dt>列表标题定义2</dt> <!--列表标题设置-->
<dd>列表标题内容3</dd>
<dd>列表标题内容4</dd>
</dl>
</div>
<div class="top-5">
<h5>进入标题5</h5>
<table border="1" style="border-collapse:collapse;"> <!--表格标签-->
<tr> <!--块元素,border表格边框-->
<td>id</td>
<td>name</td>
<td>age</td>
<td rowspan="3">编程语言</td> <!--纵向表格合并-->
</tr>
<tr> <!--块元素-->
<td>1</td>
<td>python</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>C++</td>
<td>13</td>
</tr>
<tr>
<td>3</td>
<td colspan="3">Java</td> <!--表格合并-->
</tr>
</table>
<table border="1" >
<caption>人物简介</caption>
<tbody>
<tr>
<td>秦始皇</td>
<td>55</td>
<td>华夏</td>
<td colspan="3"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>刘邦</td>
<td>60</td>
</tr>
</tfoot>
<thead>
<tr>
<td>唐渊</td>
<td>77</td>
</tr>
</thead>
</table>
</div>
</body>
</html>
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
