1.HTML
它负责网页的三个要素之中的结构;
HTML使用标签的形式来标识网页中的不同组成部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>This is a Title</title> </head> <body> <!-- html1中的标题标签:h1-h6 --> <!-- h强调的是重要性 --> <h1>This is the first Title</h1> <h2>This is the second Title</h2> <h3>This is the third Title</h3> <h4>This is the fourth Title</h4> <h5>This is the fifth Title</h5> <h6>This is the sixth Title</h6> <!-- 换行 --> <br/> <!-- 分割线 --> <hr/> safe <hr/> <!-- ul:unordered list:
1.在HTML文件中,可以利用成对的<ul></ul>标记来插入无序列表,中间的列表项标签<li></li>(list-items)用来定义列表项序列
2.使用无序列表标签ul的type属性(使用CSS的list-style来代替)。用户可以指定出现在列表项前的项目符号的样式,其取值以及相应的符号样式如
--> <ul> <li>张三</li> <li>李四</li> <li>王五</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 在html中使用form标签创建一个表单 action:代表要跳转到的目标地址 --> <form action="table.html"> 用户名:<input type="text" name="username" value="张三"/><br/> 密码:<input type="password" name="pass" ><br/> <!-- html中的单选是通过name属性值来区分是否是同一组的 --> 性别:<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br/> 爱好:<input type="checkbox" name="hobby" value="yu"/>羽毛球<input type="checkbox" name="hobby" value="basketball"/>篮球<input type="checkbox" name="hobby" value="football"/>足球<br/> 籍贯: <!-- 对于select下拉列表而言,name属性和value属性是分开的 --> <select name="address"> <option value="beijing">北京 </option> <option value="shanghai">上海</option> <option value="tianjin">天津</option> </select> <br/> <input type="submit" name="Submit"/> </form> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- img标签用于加载图片 alt:表示图片未正常加载的时候需要显示的信息 src:图片的路径 相对路径:表示的是相对于当前文件所在目录的路径 1)和当前文件在同一目录下 2)图片所在的目录和当前文件在同一文件夹 3)图片所在的目录是在当前文件的上一级或上级 绝对路径: http:// --> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 内部样式表 --> <style type="text/css"> p{ color:red; } #sss{ color:pink; }'' .ds{ font-size:20px; } </style> </head> <body> <!-- 不建议将表现和构建写在一起 W3C建议将,骨架(html),表现(css),行为(js)三者分离开来 --> <!-- 行内样式表 --> <p> 床前明月光,<br/> 疑是地上霜,<br/> 举头望明月,<br/> 低头思故乡。<br/> </p> <!-- id:属性在整个html页面中必须是唯一的 --> <p id="sss" class="ds"> 我是什么颜色的? </p> <p id="sss" class="ds"> 我是什么颜色的? </p> </body> </html>