day01_前端HTML+CSS+JavaScript

1 <html>  //根标签
2     <head>   //头标签
3         <title></title>  //标题标签
4 
5     </head>
6     <body> //主体标签
7 
8     </body>
9 </html>
1.html标签:作用:所有的html 中标签的根节点。
2.head标签:作用:用于存放<title>,<meta>,base,style,script,link注释
3.title标签:让页面用有一个属于自己的标题。
4.body标签:作用:页面的主体部分,用于存放所有的HTML标签。

标签的属性:标签可以有多个属性,必须写在标签之中。
标签名  属性1="属性值" 属性2="属性值" 
 
锚点定位(难点):通过创建锚点链接,用户可以快速定位到目标内容。
两步:
 1 <html>
 2     <head>
 3         <meta charset="utf-8">
 4         <base target="_blank">
 5     </head>    
 6     <body>
 7         <a href="http://www.baidu.com">百度</a>
 8         <a href="http://www.sina.com" target="_self">新浪</a>
 9         <a href="http://www.sohu.com">搜狐</a>
10         <a href="http://www.163.com">网易</a>
11     </body>
12 </html>
无序列表:所要输出的信息没有顺序。
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
    <ul></ul>:之中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
    <li></li> 之间相当于一个容器,可以容纳所有元素。
    无序列表会带有自己的属性样式,可以通过css来重新设定自己所需的样式。
自定义列表:
<dl>
    <dt>名词1</dt>
    <dd>名词1解释</dd>
    <dd>名词1解释</dd>

    <dt>名词2</dt>
    <dd>名词2解释</dd>
    <dd>名词2解释</dd>
</dl>

有序列表
<ol>
    <li>中国</li>
    <li>美国</li>
    <li>英国</li>
</ol>
所要输出的信息有顺序。就用<ol></ol>
<ol></ol>只能放<li></li>不能放其他的

表格:存在即合理。表格现在还是较为常用的一种标签,但不是用来布局,常见处理,显示表格式数据。
创建表格,在html网页中,想要创建表格,就要使用表格相关的标签:创建语法如下:
<table>
    <tr>
        <td>单元格内的文字</td>
    </tr>
    <tr>
        <td>单元格内的文字</td>
    </tr>
</table>
<table></table>
解释:
<table></table>:定义一个表格。
<tr></tr>:一行单元格。用于定义表格中的一行,必须嵌套在table标签中,
            在table标签中包含几对<tr></tr>就有几行表格
<td></td>:用于定义表格中的单元格,必须嵌套在<tr></tr>标签之中,
            一对<tr></tr>中包含几对<td></td>,就表示有多少列(或多少个单元格).
<table></table>:标签中只能放<tr></tr>
<tr></tr>中只能放<td></td>        
<td></td>:标签,它就像一个容器,可以容纳所有的元素。    
表格中的属性:
1.border 边框 默认值为0
2.cellspacing:设置单元格之间的空白间距。
3.cellpadding:设置单元格内容与单元格边框之间的空白间距默认值1px
4.表格的宽度。  px
5.height:表格的高度。  px
6.align:设置表格再网页中的水平对齐方式。 left center right

合并单元格(难点)
跨行合并:rowspan 跨列合并:colspan
合并单元格的思想:
    将多个内容合并的时候,就会有多余的东西,把他删除。
    例如将三个<td></td>合并成一个,那就多余了两个,需要删除。
    公式:删除的单元格个数=合并的个数-1;
    总结表格:
    1.表格提供了Html中鼎数据格式的方法。
    2.表格中由行中的单元格组成。
    3.表格中没有列元素,列的个数取决于单元格的个数。
    4.表格不要纠结于外观,那由CSS控制。
举例:跨行合并单元格:
<table width="500px" height="300px" border="1" cellspacing="0" cellpadding="0" align="center">
    <caption>火影忍者演员表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td></td>
            <td rowspan="2">28</td>
        </tr>
        <tr>
            <td>佐助</td>
            <td></td>
        </tr>
    </tbody>
</table>
举例:跨列合并单元格:
<table width="500px" height="300px" border="1" cellspacing="0" cellpadding="0" align="center">
    <caption>火影忍者演员表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td></td>
            <td>28</td>
        </tr>
        <tr>
            <td>佐助</td>
            <td colspan="2"></td>
        </tr>
    </tbody>
</table>
1 <a href="movie">个人经历</a>
2 
3 <h3 id="movie">
4 个人经历:11111111111111111111
5 1111111111111111111111111111
6 111111111111111111111111111111
7 1111111111111111111111111111
8 </h3>
base:标签:可以设置整体链接的打开状态
举例:实现了点击百度时新打开一个页面,保留原页面

表单:
在HTML中一个完整的表单通常由表单控件,也称(表单元素)、提示信息和表单域三个部分组成。
表单控件
<input type="text">:控件(重点):
在上面的语法中,<input/> 标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。
除了type属性之外,<input/>标签还可以定义很多其他的属性,其常用属性如下表所示。
属性(type类型):
1.text:单行文本输入框。
2.password:密码输入框。
3.radio:单选按钮。
4.checkbox:复选框。
5.button:普通按钮。
6.submit:提交按钮。
7.reset:重置按钮。
8.image:图像形式的提交按钮。
9.file:文件域。
name属性: 由用户自定义,控件的名称。
value属性:由用户定义,<input type="text">控件中的默认文本值。
size属性:正整数<input type="text">input控件在页面中的显示。
checked属性:checked 定义选择控件默认被选中的项。
maxlength:控件允许输入的最多字符数。
原文地址:https://www.cnblogs.com/shuai9999/p/13906369.html