一、HTML:超文本标记语言,是一种标签语言,不是编程语言,显示数据有双标签<body></body> 和单标签<img src=# / >, 标签大小写都可以
通过浏览器解析HTML代码,在<body>标签中数据会被显示出来
<IDOCTYPE html> <html> <head> title></title> 标题 </head> <body> 显示数据 </body> </html>
二、HTML常用的标签
<h1> ------> <h6>标题 例:<h1>这是标题1<h1> <hr> 横线 <br> 换行 <title></title> 标题头 <meta charsent="utf-8"> 使用utf-8字符编码 <script type="text/javascrpe"> 在网页弹出窗口 alert("你被攻击了") </script> <p></p> 段落标签,会换行 <a></a> 链接标签 例:<a href="https://www.baidu.com">百度一下</a> <img /> 图片标签 例:<img src="图片地址" /> </img> <img src=# width= "1000" height="1000"> 改变图片大小 <!-- --> 注释标签
三、表格
<table border="1" cellspacing="10" cellpadding="10"> <!--width 表示表格的宽度 border 表示外边框的粗细 cellspadding 内边框与外边框间距的大小 cellpadding 内边框与数据内容的距离 --> <tr> <th><!--表头(会加粗居中)--> </th> </tr> <tr><!--表示行--> <td style=" font-synthesis: ; 字体 font-size: ;字号 color:; 字色 border-bottom:1px dashed #ccc; 加一条虚线"><!--表示列--> 这是表格   表示空格 </td> </tr> </table>
1、合并列
<table border="1"> <tr> <td colspan="2">1</td><!-- colspan 用于合并列 --> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>
2、合并行
<table border="1"> <tr> <th>name</th> <th>age</th> <th>addr</th> </tr> <tr> <td>张三</td><!-- rowspan 用于合并行 --> <td rowspan="2">24</td> <td>qwe</td> </tr> <tr> <td>李四</td> <td>asd</td> </tr> </table>
3、列表的有序无序
<table> <ul><!--无序列表--> <li>第一</li> <li>第二</li> </ul> <ol><!--有序列表--> <li>第一</li> <li>第二</li> </ol> </table>
4、表单
表单:搜集用户的信息<br> <form name="input_data" action="index.php" method="get"> <!-- action:表示数据提交到哪个页面 method:提交数据的方式,get(数据参数拼接url),post(数据参数放在请求内容中,在url中看不到发送的数据)--> <label>姓名:</label> <input type="text" name="name"><!--文本域--> <br> <label>密码:</label> <input type="password" name="pwd"> <br> <input type="radio" name="gender" value="1">男<br> <!--按钮--> <input type="radio" name="gender" value="0">女<br> <input type="radio" name="gender" value="01">不知道<br> 爱好:<br> <input type="checkbox" name="aihao" value="lanqiu">篮球<br> <input type="checkbox" name="aihao" value="zuqiu">足球<br> <input type="checkbox" name="aihao" value="pingpangqiu">乒乓球<br> 提交: <input type="submit" name="sub" style="" value="提交"><br> </form>
四、HTML元素分类:块级元素和内联元素
1、分类:
块级元素:标签元素会以新行开始或结束 <h1> <p> <table> 等,当前元素标签独占一行
内联元素:显示数据不会以新行开始 <a> <img> <td> 等,当前元素堆积在一起
<div> 块级元素,用于组合其他元素,方便统一设置属性或者样式
2、布局:
设计网页时,考虑到页面的美观。会设置页面的布局或者整体的一个布局
<table> <div>
3、框架:
<iframe src="URL" width="" height="" frameborder=""> </iframe>
4、事件:
需要去触发某些动作的发生,需要事件的支持
<iframe src="www.baidu.com" width="100" height="400" onmouseover="alert('鼠标触碰弹窗')"></iframe> <img src="#" onerror="alert('找不到图片弹窗')"> <input type="text" name="name" onfocus="alert('点击弹窗')"> <input type="text" name="pwd" onchange="alert('改变弹窗')"> <input type="text" name="pwd" oninput="alert('输入弹窗')">